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
Copy file name to clipboardExpand all lines: docs/installation/using-with-jest.md
+19-3
Original file line number
Diff line number
Diff line change
@@ -4,8 +4,24 @@ Jest is a test runner developed by Facebook, aiming to deliver a battery-include
4
4
5
5
<divclass="vueschool"><ahref="https://vueschool.io/courses/learn-how-to-test-vuejs-components?friend=vuejs"target="_blank"rel="sponsored noopener"title="Learn how to use Jest and Vue Test Utils to test Single File Components with Vue School">Learn how to use Jest to test Single File Components with Vue School</a></div>
6
6
7
+
### Installation with Vue CLI (recommended)
8
+
7
9
If you are using the Vue CLI to build your project, you can use the plugin [cli-plugin-unit-jest](https://cli.vuejs.org/core-plugins/unit-jest.html) to run Jest tests.
8
10
11
+
```bash
12
+
$ vue add unit-jest
13
+
```
14
+
15
+
The plugin pulls all required dependencies (including jest), creates a `jest.config.js` file with sensible defaults, and generates a sample test suite.
16
+
17
+
After that, all you need to do is to install Vue Test Utils.
18
+
19
+
```bash
20
+
$ npm install --save-dev @vue/test-utils
21
+
```
22
+
23
+
### Manual installation
24
+
9
25
After setting up Jest, the first thing to do is to install Vue Test Utils and [`vue-jest`](https://github.com/vuejs/vue-jest) to process Single-File Components:
10
26
11
27
```bash
@@ -31,7 +47,7 @@ Then, you need to tell Jest to transform `.vue` files using `vue-jest`. You can
31
47
}
32
48
```
33
49
34
-
### Using with Babel
50
+
####Using with Babel
35
51
36
52
If you are going to use `babel` and import vue single file components with `.vue` extension inside your tests, you will need to install babel and transform `.js` files with `babel-jest` .
37
53
@@ -70,7 +86,7 @@ You can also add these options to `package.json`:
70
86
}
71
87
```
72
88
73
-
### Handling webpack aliases
89
+
####Handling webpack aliases
74
90
75
91
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:
76
92
@@ -87,7 +103,7 @@ If you use a resolve alias in the webpack config, e.g. aliasing `@` to `/src`, y
87
103
88
104
### Code Coverage
89
105
90
-
Jest can be used to generate coverage reports in multiple formats. The following is a simple example to get started with:
106
+
Jest can be used to generate coverage reports in multiple formats. This is disabled by default (both for a vue-cli installation and for a manual one). The following is a simple example to get started with:
91
107
92
108
Extend your `jest` config with the [`collectCoverage`](https://jestjs.io/docs/en/configuration#collectcoverage-boolean) option, and then add the [`collectCoverageFrom`](https://jestjs.io/docs/en/configuration#collectcoveragefrom-array) array to define the files for which coverage information should be collected.
0 commit comments