Skip to content

Commit

Permalink
docs: add section about test runners upgrade to migration guide (#1923)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
renatodeleao committed Dec 23, 2022
1 parent 8ed99f8 commit 39d86ad
Showing 1 changed file with 45 additions and 0 deletions.
45 changes: 45 additions & 0 deletions docs/migration/index.md
Expand Up @@ -232,3 +232,48 @@ wrapper.findAll('[data-test="token"]').at(0);
```js
wrapper.findAll('[data-test="token"]')[0];
```
## Test runners upgrade notes
> Vue Test Utils is framework agnostic - you can use it with whichever test runner you like.
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.
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.
### `@vue/vue3-jest` + `jest@^28`
If you've decided to take the opportunity and upgrade your test runner tools to a more modern version, have these in mind.
#### `ReferenceError: Vue is not defined` [vue-jest#479](https://github.com/vuejs/vue-jest/issues/479)
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:
```js
// jest.config.js
module.exports = {
testEnvironmentOptions: {
customExportConditions: ["node", "node-addons"],
}
}
```
<br/>
#### Snapshots now include my comment nodes
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:
- via `vue-jest` [config](https://github.com/vuejs/vue-jest#compiler-options-in-vue-3).
```js
// jest.config.js
module.exports = {
globals: {
'vue-jest': {
compilerOptions: {
comments: false
}
}
}
}
```
- Via `@vue/test-utils` [`mountingOptions.global.config`](https://test-utils.vuejs.org/api/#global) either globally or on per-test basis.

0 comments on commit 39d86ad

Please sign in to comment.