You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Jest is a test runner developed by Facebook, aiming to come with everything included to get started. [Learn more about Jest](https://facebook.github.io/jest/) So let's get started.
3
+
> An example project for this setup is available on [GitHub](https://github.com/vuejs/vue-test-utils-jest-example).
4
4
5
-
To test SFCs, we need to compile the files before running them in node.
6
-
7
-
*Note: Jest uses a jest-vue transformer. It does not contain all the features of vue-loader, like custom block support and style loading. To use them, read the [testing SFCs with Mocha](./testing-SFCs-with-mocha-webpack.md) guide*
5
+
Jest is a test runner developed by Facebook, aiming to deliver a battery-included unit testing solution. You can learn more about Jest on its [official documentation](https://facebook.github.io/jest/).
8
6
9
7
## Setting up Jest
10
8
11
-
The first thing to do is install Jest:
9
+
We will assume you are starting with a setup that already has webpack, vue-loader and Babel properly configured - e.g. the `webpack-simple` template scaffolded by `vue-cli`.
10
+
11
+
The first thing to do is install Jest and `vue-test-utils`:
12
12
13
13
```bash
14
-
$ npm install --save-dev jest
14
+
$ npm install --save-dev jest vue-test-utils
15
15
```
16
16
17
17
Next we need to define a unit script in our `package.json`.
@@ -25,61 +25,138 @@ Next we need to define a unit script in our `package.json`.
25
25
}
26
26
```
27
27
28
-
As you probably want to use latest javascript capabilities inside your specs though, it's recommendable to enable `babel` for the project.
28
+
## Processing SFCs in Jest
29
29
30
+
To teach Jest how to process `*.vue` files, we will need to install and configure the `jest-vue` preprocessor:
*If you’ve not heard of babel-preset-env, it basically allows compiling the JS based on the browsers you plan to support. Get more info here: [babel-preset-env](https://github.com/babel/babel-preset-env)*
36
-
37
-
We need to add a `.babelrc` file, to tell babel to use the env preset:
36
+
Next, create a `jest` block in `package.json`:
38
37
39
-
```json
38
+
```js
40
39
{
41
-
"presets": ["env"]
40
+
// ...
41
+
"jest": {
42
+
"moduleFileExtensions": [
43
+
"js",
44
+
"json",
45
+
// tell Jest to handle *.vue files
46
+
"vue"
47
+
],
48
+
"transform": {
49
+
// process *.vue files with jest-vue
50
+
".*\\.(vue)$":"<rootDir>/node_modules/jest-vue"
51
+
},
52
+
"mapCoverage":true
53
+
}
42
54
}
43
55
```
44
56
45
-
By default, Jest doesn't recognize `.vue` files. So we need to tell Jest how to handle them. To do that we need to install jest-vue, which preprocesses `.vue` files:
57
+
> **Note:**`jest-vue` currently does not support all the features of `vue-loader`, for example custom block support and style loading. To use them, read the guide on [testing SFCs with Mocha + webpack](./testing-SFCs-with-mocha-webpack.md).
58
+
59
+
## Handling webpack Aliases
60
+
61
+
If you use a resolve alias in the webpack config, e.g. aliasing `@` to `/src`, you need to add a matching config for Jest as well, using the `moduleNameMapper` option:
46
62
63
+
```js
64
+
{
65
+
// ...
66
+
"jest": {
67
+
// ...
68
+
// support the same @ -> src alias mapping in source code
69
+
"moduleNameMapper": {
70
+
"^@/(.*)$":"<rootDir>/src/$1"
71
+
}
72
+
}
73
+
}
47
74
```
48
-
npm install --sav-dev jest-vue
75
+
76
+
## Configuring Babel for Jest
77
+
78
+
Although latest versions of Node already supports most ES2015 features, you may still want to use ES modules syntax and stage-x features in your tests. For that we need to install `babel-jest`:
79
+
80
+
```bash
81
+
npm install --save-dev babel-jest
49
82
```
50
83
51
-
In our `package.json`, we need to add a field to tell Jest how to treat .vue files:
84
+
Next, we need to tell Jest to process JavaScript test files with `babel-jest` by adding an entry under `jest.transform` in `package.json`:
52
85
53
-
```json
54
-
// package.json
86
+
```js
55
87
{
88
+
// ...
56
89
"jest": {
57
-
"moduleFileExtensions": [
58
-
"js",
59
-
"json",
60
-
"vue"
61
-
],
90
+
// ...
62
91
"transform": {
63
-
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
64
-
".*\\.(vue)$": "<rootDir>/node_modules/jest-vue"
92
+
// ...
93
+
// process js with babel-jest
94
+
"^.+\\.js$":"<rootDir>/node_modules/babel-jest"
65
95
},
66
-
"mapCoverage": true
96
+
// ...
67
97
}
68
98
}
69
99
```
70
100
71
-
That's pretty much everything necessary to do before writing the first specs.
101
+
> By default, `babel-jest` automatically configures itself as long as it's installed. However, because we have explicitly added a transform for `*.vue` files, we now need to explicitly configure `babel-jest` as well.
102
+
103
+
Assuming using `babel-preset-env` with webpack, the default Babel config disables ES modules transpilation because webpack already knows how to handle ES modules. However, we do need to enable it for our tests because Jest tests run directly in Node.
104
+
105
+
Also, we can tell `babel-preset-env` to target the Node version we are using. This skips transpiling unnecessary features and makes our tests boot faster.
106
+
107
+
To apply these options only for tests, put them in a separate config under `env.test` (this will be automatically picked up by `babel-jest`).
108
+
109
+
Example `.babelrc`:
110
+
111
+
```json
112
+
{
113
+
"presets": [
114
+
["env", { "modules": false }]
115
+
],
116
+
"env": {
117
+
"test": {
118
+
"presets": [
119
+
["env", { "targets": { "node": "current" }}]
120
+
]
121
+
}
122
+
}
123
+
}
124
+
```
125
+
126
+
### Snapshot Testing
127
+
128
+
You can use [`vue-server-renderer`](https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer) to render a component into a string so that it can be saved as a snapshot for [Jest snapshot testing](https://facebook.github.io/jest/docs/en/snapshot-testing.html).
129
+
130
+
The render result of `vue-server-renderer` includes a few SSR-specific attributes, and it ignores whitespaces, making it harder to scan a diff. We can improve the saved snapshot with a custom serializer:
131
+
132
+
```js
133
+
npm install --save-dev jest-serializer-vue
134
+
```
135
+
136
+
Then configure it in `package.json`:
137
+
138
+
```js
139
+
{
140
+
// ...
141
+
"jest": {
142
+
// ...
143
+
// serializer for snapshots
144
+
"snapshotSerializers": [
145
+
"<rootDir>/node_modules/jest-serializer-vue"
146
+
]
147
+
}
148
+
}
149
+
```
72
150
73
-
### Where should my tests live
151
+
### Placing Test Files
74
152
75
-
By default, jest will pick up all files that have a `.spec.js` or `.test.js` extension. If this does not fit your needs, it's possible [to chang the testRegex](https://facebook.github.io/jest/docs/en/configuration.html#testregex-string) in the config section in the `package.json` file.
153
+
By default, jest will recursively pick up all files that have a `.spec.js` or `.test.js` extension in the entire project. If this does not fit your needs, it's possible [to chang the testRegex](https://facebook.github.io/jest/docs/en/configuration.html#testregex-string) in the config section in the `package.json` file.
76
154
77
-
Jest recommends to create a `__tests__`folder, but feel free to do as you like. Just know ahead of time, that when using the [snapshot](https://facebook.github.io/jest/docs/en/snapshot-testing.html#content) feature, snapshots will get stored in a `__snapshot__` folder.
155
+
Jest recommends creating a `__tests__`directory right next to the code being tested, but feel free to structure your tests as you see fit. Just beware that Jest would create a `__snapshots__` directory next to test files that performs snapshot testing.
78
156
79
157
### Example Spec
80
158
81
-
If you are familiar with Jasmine, or similar test libraries you should feel at home in Jest right away. Many useful assertions are in place, so
82
-
enjoy writing specs.
159
+
If you are familiar with Jasmine, you should feel right at home with Jest's [assertion API](https://facebook.github.io/jest/docs/en/expect.html#content):
83
160
84
161
```js
85
162
import { mount } from'vue-test-utils'
@@ -95,6 +172,7 @@ describe('Component', () => {
95
172
96
173
### Resources
97
174
175
+
-[Example project for this setup](https://github.com/vuejs/vue-test-utils-jest-example)
98
176
-[Examples and slides from Vue Conf 2017](https://github.com/codebryo/vue-testing-with-jest-conf17)
0 commit comments