Skip to content

Commit acac67f

Browse files
Changed recommendation for testing library (#2306)
* fix: changed recommendation for testing library * fix: added testing library example back * fix: removed the unnecessary explanation
1 parent 3cb76a4 commit acac67f

File tree

1 file changed

+8
-6
lines changed

1 file changed

+8
-6
lines changed

src/guide/scaling-up/testing.md

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -207,21 +207,21 @@ cy.get(valueSelector).should('be.visible').and('contain.text', '0')
207207

208208
### Recommendation {#recommendation-1}
209209

210-
- [Vitest](https://vitest.dev/) for components or composables that render headlessly (e.g. the [`useFavicon`](https://vueuse.org/core/useFavicon/#usefavicon) function in VueUse). Components and DOM can be tested using [@testing-library/vue](https://testing-library.com/docs/vue-testing-library/intro).
210+
- [Vitest](https://vitest.dev/) for components or composables that render headlessly (e.g. the [`useFavicon`](https://vueuse.org/core/useFavicon/#usefavicon) function in VueUse). Components and DOM can be tested using [`@vue/test-utils`](https://github.com/vuejs/test-utils).
211211

212212
- [Cypress Component Testing](https://on.cypress.io/component) for components whose expected behavior depends on properly rendering styles or triggering native DOM events. Can be used with Testing Library via [@testing-library/cypress](https://testing-library.com/docs/cypress-testing-library/intro).
213213

214-
The main differences between Vitest and browser-based runners are speed and execution context. In short, browser-based runners, like Cypress, can catch issues that node-based runners, like Vitest, cannot (e.g. style issues, real native DOM events, cookies, local storage, and network failures), but browser-based runners are *orders of magnitude slower than Vitest* because they do open a browser, compile your stylesheets, and more. Cypress is a browser-based runner that supports component testing. Please read [Vitest's comparison page](https://vitest.dev/guide/comparisons.html#cypress) for the latest information comparing Vitest and Cypress.
214+
The main differences between Vitest and browser-based runners are speed and execution context. In short, browser-based runners, like Cypress, can catch issues that node-based runners, like Vitest, cannot (e.g. style issues, real native DOM events, cookies, local storage, and network failures), but browser-based runners are _orders of magnitude slower than Vitest_ because they do open a browser, compile your stylesheets, and more. Cypress is a browser-based runner that supports component testing. Please read [Vitest's comparison page](https://vitest.dev/guide/comparisons.html#cypress) for the latest information comparing Vitest and Cypress.
215215

216216
### Mounting Libraries {#mounting-libraries}
217217

218218
Component testing often involves mounting the component being tested in isolation, triggering simulated user input events, and asserting on the rendered DOM output. There are dedicated utility libraries that make these tasks simpler.
219219

220-
- [`@testing-library/vue`](https://github.com/testing-library/vue-testing-library) is a Vue testing library focused on testing components without relying on implementation details. Built with accessibility in mind, its approach also makes refactoring a breeze. Its guiding principle is that the more tests resemble the way software is used, the more confidence they can provide.
221-
222220
- [`@vue/test-utils`](https://github.com/vuejs/test-utils) is the official low-level component testing library that was written to provide users access to Vue specific APIs. It's also the lower-level library `@testing-library/vue` is built on top of.
223221

224-
We recommend using `@testing-library/vue` for testing components in applications, as its focus aligns better with the testing priorities of applications. Use `@vue/test-utils` only if you are building advanced components that require testing Vue-specific internals.
222+
- [`@testing-library/vue`](https://github.com/testing-library/vue-testing-library) is a Vue testing library focused on testing components without relying on implementation details. Its guiding principle is that the more tests resemble the way software is used, the more confidence they can provide.
223+
224+
We recommend using `@vue/test-utils` for testing components in applications. `@testing-library/vue` has issues with testing asynchronous component with Suspense, so it should be used with caution.
225225

226226
### Other Options {#other-options-1}
227227

@@ -310,11 +310,12 @@ If you are using TypeScript, add `vitest/globals` to the `types` field in your `
310310
// tsconfig.json
311311

312312
{
313-
"compilerOptions": {
313+
"compilerOptions": {
314314
"types": ["vitest/globals"]
315315
}
316316
}
317317
```
318+
318319
:::
319320

320321
Then create a file ending in `*.test.js` in your project. You can place all test files in a test directory in project root, or in test directories next to your source files. Vitest will automatically search for them using the naming convention.
@@ -413,6 +414,7 @@ export function withSetup(composable) {
413414
return [result, app]
414415
}
415416
```
417+
416418
```js
417419
import { withSetup } from './test-utils'
418420
import { useFoo } from './foo'

0 commit comments

Comments
 (0)