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/guides/choosing-a-test-runner.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ There are many popular JavaScript test runners, and Vue Test Utils works with al
6
6
7
7
There are a few things to consider when choosing a test runner though: feature set, performance, and support for single-file component (SFC) pre-compilation. After carefully comparing existing libraries, here are two test runners that we recommend:
8
8
9
-
-[Jest](https://facebook.github.io/jest/docs/en/getting-started.html#content) is the most fully featured test runner. It requires the least configuration, sets up JSDOM by default, provides built-in assertions, and has a great command line user experience. However, you will need a preprocessor to be able to import SFC components in your tests. We have created the `vue-jest` preprocessor which can handle most common SFC features, but it currently does not have 100% feature parity with `vue-loader`.
9
+
-[Jest](https://jestjs.io/docs/en/getting-started.html#content) is the most fully featured test runner. It requires the least configuration, sets up JSDOM by default, provides built-in assertions, and has a great command line user experience. However, you will need a preprocessor to be able to import SFC components in your tests. We have created the `vue-jest` preprocessor which can handle most common SFC features, but it currently does not have 100% feature parity with `vue-loader`.
10
10
11
11
-[mocha-webpack](https://github.com/zinserjan/mocha-webpack) is a wrapper around webpack + Mocha, but with a more streamlined interface and watch mode. The benefits of this setup is that we can get complete SFC support via webpack + `vue-loader`, but it requires more configuration upfront.
Copy file name to clipboardExpand all lines: docs/guides/testing-async-components.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
To simplify testing, Vue Test Utils applies DOM updates _synchronously_. However, there are some techniques you need to be aware of when testing a component with asynchronous behavior such as callbacks or promises.
4
4
5
-
One of the most common asynchronous behaviors is API calls and Vuex actions. The following examples shows how to test a method that makes an API call. This example uses Jest to run the test and to mock the HTTP library `axios`. More about Jest manual mocks can be found [here](https://facebook.github.io/jest/docs/en/manual-mocks.html#content).
5
+
One of the most common asynchronous behaviors is API calls and Vuex actions. The following examples shows how to test a method that makes an API call. This example uses Jest to run the test and to mock the HTTP library `axios`. More about Jest manual mocks can be found [here](https://jestjs.io/docs/en/manual-mocks.html#content).
6
6
7
7
The implementation of the `axios` mock looks like this:
Copy file name to clipboardExpand all lines: docs/guides/testing-single-file-components-with-jest.md
+8-8
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
> An example project for this setup is available on [GitHub](https://github.com/vuejs/vue-test-utils-jest-example).
4
4
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/).
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://jestjs.io/).
6
6
7
7
#### Setting up Jest
8
8
@@ -122,15 +122,15 @@ Example `.babelrc`:
122
122
123
123
### Placing Test Files
124
124
125
-
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 change the `testRegex`](https://facebook.github.io/jest/docs/en/configuration.html#testregex-string) in the config section in the `package.json` file.
125
+
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 change the `testRegex`](https://jestjs.io/docs/en/configuration.html#testregex-string-array-string) in the config section in the `package.json` file.
126
126
127
127
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.
128
128
129
129
### Coverage
130
130
131
131
Jest can be used to generate coverage reports in multiple formats. The following is a simple example to get started with:
132
132
133
-
Extend your `jest` config (usually in `package.json` or `jest.config.js`) with the [`collectCoverage`](https://facebook.github.io/jest/docs/en/configuration.html#collectcoverage-boolean) option, and then add the [`collectCoverageFrom`](https://facebook.github.io/jest/docs/en/configuration.html#collectcoveragefrom-array) array to define the files for which coverage information should be collected.
133
+
Extend your `jest` config (usually in `package.json` or `jest.config.js`) with the [`collectCoverage`](https://jestjs.io/docs/en/configuration.html#collectcoverage-boolean) option, and then add the [`collectCoverageFrom`](https://jestjs.io/docs/en/configuration.html#collectcoveragefrom-array) array to define the files for which coverage information should be collected.
134
134
135
135
```json
136
136
{
@@ -142,7 +142,7 @@ Extend your `jest` config (usually in `package.json` or `jest.config.js`) with t
142
142
}
143
143
```
144
144
145
-
This will enable coverage reports with the [default coverage reporters](https://facebook.github.io/jest/docs/en/configuration.html#coveragereporters-array-string). You can customise these with the `coverageReporters` option:
145
+
This will enable coverage reports with the [default coverage reporters](https://jestjs.io/docs/en/configuration.html#coveragereporters-array-string). You can customise these with the `coverageReporters` option:
146
146
147
147
```json
148
148
{
@@ -153,11 +153,11 @@ This will enable coverage reports with the [default coverage reporters](https://
153
153
}
154
154
```
155
155
156
-
Further documentation can be found in the [Jest configuration documentation](https://facebook.github.io/jest/docs/en/configuration.html#collectcoverage-boolean), where you can find options for coverage thresholds, target output directories, etc.
156
+
Further documentation can be found in the [Jest configuration documentation](https://jestjs.io/docs/en/configuration.html#collectcoverage-boolean), where you can find options for coverage thresholds, target output directories, etc.
157
157
158
158
### Example Spec
159
159
160
-
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):
160
+
If you are familiar with Jasmine, you should feel right at home with Jest's [assertion API](https://jestjs.io/docs/en/expect.html#content):
161
161
162
162
```js
163
163
import { mount } from'@vue/test-utils'
@@ -173,7 +173,7 @@ describe('Component', () => {
173
173
174
174
### Snapshot Testing
175
175
176
-
When you mount a component with Vue Test Utils, you get access to the root HTML element. This can be saved as a snapshot for [Jest snapshot testing](https://facebook.github.io/jest/docs/en/snapshot-testing.html):
176
+
When you mount a component with Vue Test Utils, you get access to the root HTML element. This can be saved as a snapshot for [Jest snapshot testing](https://jestjs.io/docs/en/snapshot-testing.html):
177
177
178
178
```js
179
179
test('renders correctly', () => {
@@ -205,5 +205,5 @@ Then configure it in `package.json`:
205
205
206
206
-[Example project for this setup](https://github.com/vuejs/vue-test-utils-jest-example)
207
207
-[Examples and slides from Vue Conf 2017](https://github.com/codebryo/vue-testing-with-jest-conf17)
Copy file name to clipboardExpand all lines: docs/guides/using-with-typescript.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -30,7 +30,7 @@ The next step is to add Jest to the project.
30
30
31
31
### Setting up Jest
32
32
33
-
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/).
33
+
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://jestjs.io/).
34
34
35
35
Install Jest and Vue Test Utils:
36
36
@@ -154,4 +154,4 @@ That's all we need to do to get TypeScript and Vue Test Utils working together!
154
154
### Resources
155
155
156
156
-[Example project for this setup](https://github.com/vuejs/vue-test-utils-typescript-example)
Copy file name to clipboardExpand all lines: docs/guides/using-with-vuex.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -94,7 +94,7 @@ What’s happening here? First we tell Vue to use Vuex with the `localVue.use` m
94
94
95
95
We then make a mock store by calling `new Vuex.Store` with our mock values. We only pass it the actions, since that’s all we care about.
96
96
97
-
The actions are [jest mock functions](https://facebook.github.io/jest/docs/en/mock-functions.html). These mock functions give us methods to assert whether the actions were called or not.
97
+
The actions are [jest mock functions](https://jestjs.io/docs/en/mock-functions.html). These mock functions give us methods to assert whether the actions were called or not.
98
98
99
99
We can then assert in our tests that the action stub was called when expected.
Vue Test Utils でコンポーネントをマウントすると、コンポーネントのルート HTML 要素にアクセスすることができます。 [Jest のスナップショットテスト](https://facebook.github.io/jest/docs/en/snapshot-testing.html)で使用するためにこれを保存することができます。
174
+
Vue Test Utils でコンポーネントをマウントすると、コンポーネントのルート HTML 要素にアクセスすることができます。 [Jest のスナップショットテスト](https://jestjs.io/docs/en/snapshot-testing.html)で使用するためにこれを保存することができます。
0 commit comments