Which is Better Vue.js Testing Utilities?
@vue/test-utils vs @testing-library/vue
1 Year
@vue/test-utils@testing-library/vueSimilar Packages:
What's Vue.js Testing Utilities?

Testing utilities for Vue.js are essential for ensuring the reliability and functionality of Vue components. These libraries provide tools and methods to facilitate unit testing, integration testing, and end-to-end testing of Vue applications. They help developers write tests that are easy to understand and maintain, ensuring that components behave as expected under various conditions. The primary goal of these libraries is to enhance the testing experience, making it more intuitive and aligned with best practices in modern web development.

NPM Package Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
@vue/test-utils1,774,4691,0351.51 MB305 months agoMIT
@testing-library/vue279,3821,08130.5 kB275 months agoMIT
Feature Comparison: @vue/test-utils vs @testing-library/vue

Testing Philosophy

  • @vue/test-utils: @vue/test-utils provides a more traditional approach to testing, allowing developers to interact with the component's internals. This can be beneficial for unit tests where understanding the component's behavior in isolation is crucial.
  • @testing-library/vue: @testing-library/vue promotes the philosophy of testing components as users would interact with them. It encourages developers to write tests that focus on the output and behavior of components rather than their implementation details, leading to more robust and maintainable tests.

User Interaction Simulation

  • @vue/test-utils: While @vue/test-utils allows for some interaction simulation, its primary focus is on component structure and behavior. It provides methods to trigger events and manipulate component state, but it does not emphasize user-centric testing as much as @testing-library/vue.
  • @testing-library/vue: This library excels at simulating user interactions such as clicks, typing, and form submissions. It provides utilities to query elements in a way that mimics how users would find them, which helps ensure that the tests reflect real-world usage scenarios.

Component Mounting

  • @vue/test-utils: @vue/test-utils offers both shallow and full mounting options, allowing developers to test components in isolation or with their child components rendered. This flexibility is useful for testing complex components with multiple dependencies.
  • @testing-library/vue: @testing-library/vue provides a simple API for mounting components that focuses on rendering them in a way that resembles how they would appear in the actual application. This helps ensure that the component behaves correctly in a real-world context.

Learning Curve

  • @vue/test-utils: @vue/test-utils may have a steeper learning curve due to its more extensive API and the need to understand Vue's component lifecycle and structure. However, it provides powerful tools for developers looking to perform in-depth testing.
  • @testing-library/vue: This library is designed to be intuitive and easy to learn, especially for those familiar with user-centric testing. Its API is straightforward, making it accessible for developers who may be new to testing.

Community and Ecosystem

  • @vue/test-utils: As the official testing utility for Vue.js, it has strong support from the Vue community and is well-documented, making it a reliable choice for developers looking to integrate testing into their Vue applications.
  • @testing-library/vue: Part of the Testing Library family, it benefits from a strong community and a wealth of resources, documentation, and best practices that promote effective testing strategies across various frameworks.
How to Choose: @vue/test-utils vs @testing-library/vue
  • @vue/test-utils: Choose @vue/test-utils if you need a more comprehensive set of utilities for shallow and full mounting of Vue components, allowing for detailed testing of component internals and lifecycle methods. It is particularly useful for unit testing where you want to isolate components and test their behavior in a controlled environment.
  • @testing-library/vue: Choose @testing-library/vue if you want to focus on testing the user experience by simulating real user interactions and ensuring that your components behave correctly in a way that users would expect. It emphasizes testing from the user's perspective, which can lead to more meaningful tests.
README for @vue/test-utils

Vue Test Utils

Component testing utils for Vue 3.

Languages

🇫🇷 French version of this README.md

Installation and Usage

  • yarn: yarn add @vue/test-utils --dev
  • npm: npm install @vue/test-utils --save-dev

Get started with the documentation.

Coming from Vue 2 + Test Utils v1?

Check the migration guide. It's still a work in progress. If you find a problem or something that doesn't work that previously did in Vue Test Utils v1, please open an issue.

Documentation

See the docs.

Development

Get started by running pnpm install. You can run the tests with pnpm test. That's it!

Contributing Docs

All the documentation files can be found in packages/docs. It contains the English markdown files while translation(s) are stored in their corresponding <lang> sub-folder(s):

  • fr: French translation.

Besides that, the .vitepress sub-folder contains the config and theme, including the i18n information.

  • pnpm docs:dev: Start the docs dev server.
  • pnpm docs:build: Build the docs.

To add or maintain the translations, we follow the Vue Ecosystem Translation Guidelines.

  • pnpm docs:translation:status [<lang>]: Show the translation status for your language. If you don't specify a language, it will show the status for all languages.
  • pnpm docs:translation:compare <lang>: Compare the docs with the latest checkpoint for your language.
  • pnpm docs:translation:update <lang> [<commit>]: Update the checkpoint for your language. The checkpoint will be set by the latest commit hash. However, you can also specify a commit hash manually.