Skip to content

Commit 48100be

Browse files
authored
docs(installation): Split Vue CLI and manual installation of Vue Test Utils + Jest (#1778)
- Make two sections, one for the Vue CLI installation and one for the manual installation. - Clarify that code coverage is off by default.
1 parent 1865355 commit 48100be

File tree

1 file changed

+19
-3
lines changed

1 file changed

+19
-3
lines changed

docs/installation/using-with-jest.md

+19-3
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,24 @@ Jest is a test runner developed by Facebook, aiming to deliver a battery-include
44

55
<div class="vueschool"><a href="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>
66

7+
### Installation with Vue CLI (recommended)
8+
79
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.
810

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+
925
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:
1026

1127
```bash
@@ -31,7 +47,7 @@ Then, you need to tell Jest to transform `.vue` files using `vue-jest`. You can
3147
}
3248
```
3349

34-
### Using with Babel
50+
#### Using with Babel
3551

3652
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` .
3753

@@ -70,7 +86,7 @@ You can also add these options to `package.json`:
7086
}
7187
```
7288

73-
### Handling webpack aliases
89+
#### Handling webpack aliases
7490

7591
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:
7692

@@ -87,7 +103,7 @@ If you use a resolve alias in the webpack config, e.g. aliasing `@` to `/src`, y
87103

88104
### Code Coverage
89105

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:
91107

92108
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.
93109

0 commit comments

Comments
 (0)