Skip to content

Commit 39d86ad

Browse files
authored
docs: add section about test runners upgrade to migration guide (#1923)
Context: vuejs/vue-test-utils#1975 (comment) As discussed, there a couple of issues that the community faced while upgrading to vue@3 @vue/test-utils@^2 but that are not directly related with them. In a effort to make migrations more smooth, a new section was added to the migration docs that lists some common problems with underlying test runners, that might happen simply because of the fact that users took the opportunity to upgrade their test stacks dependecies as well. It starts with a few issues with jest, one reported in the legacy test-utils repo and other one that i've personally faced. vuejs/vue-test-utils#1975
1 parent 8ed99f8 commit 39d86ad

File tree

1 file changed

+45
-0
lines changed

1 file changed

+45
-0
lines changed

docs/migration/index.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -232,3 +232,48 @@ wrapper.findAll('[data-test="token"]').at(0);
232232
```js
233233
wrapper.findAll('[data-test="token"]')[0];
234234
```
235+
236+
## Test runners upgrade notes
237+
238+
> Vue Test Utils is framework agnostic - you can use it with whichever test runner you like.
239+
240+
This statement is at the core of `@vue/test-utils`. But we do relate to the fact that migrating code bases and corresponding test suites to `vue@3` can be, in some scenarios, a pretty big effort.
241+
242+
This section tries to compile some common gotchas spotted by our community while doing their migrations and also updating their underlying test running stack to more modern versions. These are unrelated to `@vue/test-utils`, but we hope it can help you out completing this important migration step.
243+
244+
### `@vue/vue3-jest` + `jest@^28`
245+
246+
If you've decided to take the opportunity and upgrade your test runner tools to a more modern version, have these in mind.
247+
248+
#### `ReferenceError: Vue is not defined` [vue-jest#479](https://github.com/vuejs/vue-jest/issues/479)
249+
250+
When `jest-environment-jsdom` package is used, it defaults to load libraries from `package.json` [`browser` entry](https://jestjs.io/docs/configuration#testenvironmentoptions-object). You can override it to use `node` imports instead and fix this error:
251+
252+
```js
253+
// jest.config.js
254+
module.exports = {
255+
testEnvironmentOptions: {
256+
customExportConditions: ["node", "node-addons"],
257+
}
258+
}
259+
```
260+
<br/>
261+
262+
#### Snapshots now include my comment nodes
263+
264+
If you use snapshot testing and comment nodes are leaking into your snapshots, note that `comments` are now always [preserved](https://vuejs.org/api/application.html#app-config-compileroptions-comments) and only removed in production. You can override this behaviour by tweaking `app.config.compilerOptions` to remove them from snapshots as well:
265+
- via `vue-jest` [config](https://github.com/vuejs/vue-jest#compiler-options-in-vue-3).
266+
```js
267+
// jest.config.js
268+
module.exports = {
269+
globals: {
270+
'vue-jest': {
271+
compilerOptions: {
272+
comments: false
273+
}
274+
}
275+
}
276+
}
277+
```
278+
- Via `@vue/test-utils` [`mountingOptions.global.config`](https://test-utils.vuejs.org/api/#global) either globally or on per-test basis.
279+

0 commit comments

Comments
 (0)