diff --git a/docs/guides/choosing-a-test-runner.md b/docs/guides/choosing-a-test-runner.md index 9b6f1be47..20e9bed42 100644 --- a/docs/guides/choosing-a-test-runner.md +++ b/docs/guides/choosing-a-test-runner.md @@ -6,7 +6,7 @@ There are many popular JavaScript test runners, and Vue Test Utils works with al 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: -- [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`. +- [Jest](https://jestjs.io/docs/en/getting-started#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`. - [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. diff --git a/docs/guides/testing-async-components.md b/docs/guides/testing-async-components.md index b179243e4..db977ffbb 100644 --- a/docs/guides/testing-async-components.md +++ b/docs/guides/testing-async-components.md @@ -2,7 +2,7 @@ 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. -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). +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#content). The implementation of the `axios` mock looks like this: diff --git a/docs/guides/testing-single-file-components-with-jest.md b/docs/guides/testing-single-file-components-with-jest.md index d56f404bd..7661d4ad2 100644 --- a/docs/guides/testing-single-file-components-with-jest.md +++ b/docs/guides/testing-single-file-components-with-jest.md @@ -122,7 +122,7 @@ Example `.babelrc`: ### Placing Test Files -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. +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#testregex-string-array-string) in the config section in the `package.json` file. 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. @@ -130,7 +130,7 @@ Jest recommends creating a `__tests__` directory right next to the code being te Jest can be used to generate coverage reports in multiple formats. The following is a simple example to get started with: -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. +Extend your `jest` config (usually in `package.json` or `jest.config.js`) 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. ```json { @@ -142,7 +142,7 @@ Extend your `jest` config (usually in `package.json` or `jest.config.js`) with t } ``` -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: +This will enable coverage reports with the [default coverage reporters](https://jestjs.io/docs/en/configuration#coveragereporters-array-string). You can customise these with the `coverageReporters` option: ```json { @@ -153,11 +153,11 @@ This will enable coverage reports with the [default coverage reporters](https:// } ``` -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. +Further documentation can be found in the [Jest configuration documentation](https://jestjs.io/docs/en/configuration#collectcoverage-boolean), where you can find options for coverage thresholds, target output directories, etc. ### Example Spec -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): +If you are familiar with Jasmine, you should feel right at home with Jest's [assertion API](https://jestjs.io/docs/en/expect#content): ```js import { mount } from '@vue/test-utils' @@ -173,7 +173,7 @@ describe('Component', () => { ### Snapshot Testing -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): +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): ```js test('renders correctly', () => { diff --git a/docs/guides/testing-single-file-components-with-mocha-webpack.md b/docs/guides/testing-single-file-components-with-mocha-webpack.md index bd4401c59..16bccb5d1 100644 --- a/docs/guides/testing-single-file-components-with-mocha-webpack.md +++ b/docs/guides/testing-single-file-components-with-mocha-webpack.md @@ -96,7 +96,7 @@ This adds a browser environment to Node, so that Vue Test Utils can run correctl [Chai](http://chaijs.com/) is a popular assertion library that is commonly used alongside Mocha. You may also want to check out [Sinon](http://sinonjs.org/) for creating spies and stubs. -Alternatively you can use `expect` which is now part of Jest, and exposes [the exact same API](http://facebook.github.io/jest/docs/en/expect.html#content) in Jest docs. +Alternatively you can use `expect` which is now part of Jest, and exposes [the exact same API](https://jestjs.io/docs/en/expect#content) in Jest docs. We will be using `expect` here and make it globally available so that we don't have to import it in every test: @@ -181,4 +181,4 @@ To setup code coverage to `mocha-webpack`, follow [the `mocha-webpack` code cove - [mocha-webpack](http://zinserjan.github.io/mocha-webpack/) - [Chai](http://chaijs.com/) - [Sinon](http://sinonjs.org/) -- [jest/expect](http://facebook.github.io/jest/docs/en/expect.html#content) +- [jest/expect](https://jestjs.io/docs/en/expect#content) diff --git a/docs/zh/guides/choosing-a-test-runner.md b/docs/zh/guides/choosing-a-test-runner.md index 852a0b3e4..674e11bdd 100644 --- a/docs/zh/guides/choosing-a-test-runner.md +++ b/docs/zh/guides/choosing-a-test-runner.md @@ -6,7 +6,7 @@ 当然在我们选用测试运行器的时候也需要考虑一些事项：功能集合、性能和对单文件组件预编译的支持等。在仔细比对现有的库之后，我们推荐其中的两个测试运行器： -- [Jest](https://jestjs.io/docs/en/getting-started.html#content) 是功能最全的测试运行器。它所需的配置是最少的，默认安装了 JSDOM，内置断言且命令行的用户体验非常好。不过你需要一个能够将单文件组件导入到测试中的预处理器。我们已经创建了 `vue-jest` 预处理器来处理最常见的单文件组件特性，但仍不是 `vue-loader` 100% 的功能。 +- [Jest](https://jestjs.io/docs/zh-Hans/getting-started) 是功能最全的测试运行器。它所需的配置是最少的，默认安装了 JSDOM，内置断言且命令行的用户体验非常好。不过你需要一个能够将单文件组件导入到测试中的预处理器。我们已经创建了 `vue-jest` 预处理器来处理最常见的单文件组件特性，但仍不是 `vue-loader` 100% 的功能。 - [mocha-webpack](https://github.com/zinserjan/mocha-webpack) 是一个 webpack + Mocha 的包裹器，同时包含了更顺畅的接口和侦听模式。这些设置的好处在于我们能够通过 webpack + `vue-loader` 得到完整的单文件组件支持，但这本身是需要很多配置的。 diff --git a/docs/zh/guides/testing-async-components.md b/docs/zh/guides/testing-async-components.md index 36a1febd2..aa113c1de 100644 --- a/docs/zh/guides/testing-async-components.md +++ b/docs/zh/guides/testing-async-components.md @@ -2,7 +2,7 @@ 为了让测试变得简单，`@vue/test-utils` *同步*应用 DOM 更新。不过当测试一个带有回调或 Promise 等异步行为的组件时，你需要留意一些技巧。 -API 调用和 Vuex action 都是最常见的异步行为之一。下列例子展示了如何测试一个会调用到 API 的方法。这个例子使用 Jest 运行测试用例同时模拟了 HTTP 库 `axios`。更多关于 Jest 的手动模拟的介绍可移步[这里](https://jestjs.io/docs/en/manual-mocks.html#content)。 +API 调用和 Vuex action 都是最常见的异步行为之一。下列例子展示了如何测试一个会调用到 API 的方法。这个例子使用 Jest 运行测试用例同时模拟了 HTTP 库 `axios`。更多关于 Jest 的手动模拟的介绍可移步[这里](https://jestjs.io/docs/zh-Hans/manual-mocks)。 `axios` 的模拟实现大概是这个样子的： @@ -66,11 +66,11 @@ it('fetches async when a button is clicked', done => { }) ``` -`$nextTick` 或 `setTimeout` 允许测试通过的原因是 Promise 回调的 microtask 队列会在处理 `$nextTick` 和 `setTimeout` 的任务队列之前先被处理。也就是说在 `$nextTick` 和 `setTimeout` 运行的时候，任何 microtask 队列上的 Promise 回调都已经执行过了。更多的解释请移步[这里](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/)。 +`setTimeout` 允许测试通过的原因是 Promise 回调的 microtask 队列会在处理 `setTimeout` 的回调的任务队列之前先被处理。也就是说在 `setTimeout` 的回调运行的时候，任何 microtask 队列上的 Promise 回调都已经执行过了。另一方面 `$nextTick` 会安排一个 microtask，但是因为 microtask 队列的处理方式是先进先出，所以也会保证回调在作出断言时已经被执行。更多的解释请移步[这里](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/)。 另一个解决方案是使用一个 `async` 函数配合 npm 包 `flush-promises`。`flush-promises` 会清除所有等待完成的 Promise 具柄。你可以 `await` 该 `flushPromiese` 调用，以此清除等待中的 Promise 并改进你的测试用例的可读性。 -The updated test looks like this: +更新后的测试看起来像这样： ```js import { shallowMount } from '@vue/test-utils' diff --git a/docs/zh/guides/testing-single-file-components-with-jest.md b/docs/zh/guides/testing-single-file-components-with-jest.md index d70ca90de..cec861e4a 100644 --- a/docs/zh/guides/testing-single-file-components-with-jest.md +++ b/docs/zh/guides/testing-single-file-components-with-jest.md @@ -120,7 +120,7 @@ npm install --save-dev babel-jest ### 放置测试文件 -默认情况下，Jest 将会递归的找到整个工程里所有 `.spec.js` 或 `.test.js` 扩展名的文件。如果这不符合你的需求，你也可以在 `package.json` 里的配置段落中[改变它的 `testRegex`](https://jestjs.io/docs/en/configuration.html#testregex-string-array-string)。 +默认情况下，Jest 将会递归的找到整个工程里所有 `.spec.js` 或 `.test.js` 扩展名的文件。如果这不符合你的需求，你也可以在 `package.json` 里的配置段落中[改变它的 `testRegex`](https://jestjs.io/docs/zh-Hans/configuration#testregex-string-array-string)。 Jest 推荐你在被测试代码的所在目录下创建一个 `__tests__` 目录，但你也可以为你的测试文件随意设计自己习惯的文件结构。不过要当心 Jest 会为快照测试在临近测试文件的地方创建一个 `__snapshots__` 目录。 @@ -128,7 +128,7 @@ Jest 推荐你在被测试代码的所在目录下创建一个 `__tests__` 目 Jest 可以被用来生成多种格式的测试覆盖率报告。以下是一个简单的起步的例子： -扩展你的 `jest` 配置 (通常在 `package.json` 或 `jest.config.js` 中) 的 [`collectCoverage`](https://jestjs.io/docs/en/configuration.html#collectcoverage-boolean) 选项，然后添加 [`collectCoverageFrom`](https://jestjs.io/docs/en/configuration.html#collectcoveragefrom-array) 数组来定义需要收集测试覆盖率信息的文件。 +扩展你的 `jest` 配置 (通常在 `package.json` 或 `jest.config.js` 中) 的 [`collectCoverage`](https://jestjs.io/docs/zh-Hans/configuration#collectcoverage-boolean) 选项，然后添加 [`collectCoverageFrom`](https://jestjs.io/docs/zh-Hans/configuration#collectcoveragefrom-array) 数组来定义需要收集测试覆盖率信息的文件。 ```json { @@ -140,7 +140,7 @@ Jest 可以被用来生成多种格式的测试覆盖率报告。以下是一个 } ``` -这样就会开启[默认格式的测试覆盖率报告](https://jestjs.io/docs/en/configuration.html#coveragereporters-array-string)。你可以通过 `coverageReporters` 选项来定制它们。 +这样就会开启[默认格式的测试覆盖率报告](https://jestjs.io/docs/zh-Hans/configuration#coveragereporters-array-string)。你可以通过 `coverageReporters` 选项来定制它们。 ```json { @@ -151,11 +151,11 @@ Jest 可以被用来生成多种格式的测试覆盖率报告。以下是一个 } ``` -更多文档内容请移步至 [Jest 配置文档](https://jestjs.io/docs/en/configuration.html#collectcoverage-boolean)，在那里你可以找到覆盖率阀值、目标输出目录等选项。 +更多文档内容请移步至 [Jest 配置文档](https://jestjs.io/docs/zh-Hans/configuration#collectcoverage-boolean)，在那里你可以找到覆盖率阀值、目标输出目录等选项。 ### 测试规范示例 -如果你已经熟悉了 Jasmine，你应该很适应 Jest 的[断言 API](https://jestjs.io/docs/en/expect.html#content)： +如果你已经熟悉了 Jasmine，你应该很适应 Jest 的[断言 API](https://jestjs.io/docs/zh-Hans/expect.htm)： ```js import { mount } from '@vue/test-utils' @@ -171,7 +171,7 @@ describe('Component', () => { ### 快照测试 -当你用 Vue Test Utils 挂载一个组件时，你可以访问到 HTML 根元素。这可以保存为一个快照为 [Jest 快照测试](https://jestjs.io/docs/en/snapshot-testing.html)所用。 +当你用 Vue Test Utils 挂载一个组件时，你可以访问到 HTML 根元素。这可以保存为一个快照为 [Jest 快照测试](https://jestjs.io/docs/zh-Hans/snapshot-testing)所用。 ```js test('renders correctly', () => { diff --git a/docs/zh/guides/testing-single-file-components-with-mocha-webpack.md b/docs/zh/guides/testing-single-file-components-with-mocha-webpack.md index ee0d1155f..eac7b81a7 100644 --- a/docs/zh/guides/testing-single-file-components-with-mocha-webpack.md +++ b/docs/zh/guides/testing-single-file-components-with-mocha-webpack.md @@ -96,7 +96,7 @@ require('jsdom-global')() [Chai](http://chaijs.com/) 是一个流行的断言库，经常和 Mocha 配合使用。你可能也想把 [Sinon](http://sinonjs.org/) 用于创建间谍和存根。 -另外你也可以使用 `expect`，它现在是 Jest 的一部分，且在 Jest 文档里暴露了[完全相同的 API](http://facebook.github.io/jest/docs/en/expect.html#content)。 +另外你也可以使用 `expect`，它现在是 Jest 的一部分，且在 Jest 文档里暴露了[完全相同的 API](https://jestjs.io/docs/zh-Hans/expect)。 这里我们将使用 `expect` 且令其全局可用，这样我们就不需要在每个测试文件里导入它了： @@ -181,4 +181,4 @@ npm run test - [mocha-webpack](http://zinserjan.github.io/mocha-webpack/) - [Chai](http://chaijs.com/) - [Sinon](http://sinonjs.org/) -- [jest/expect](http://facebook.github.io/jest/docs/en/expect.html#content) +- [jest/expect](https://jestjs.io/docs/zh-Hans/expect) diff --git a/docs/zh/guides/using-with-vuex.md b/docs/zh/guides/using-with-vuex.md index 99c55e432..df9201beb 100644 --- a/docs/zh/guides/using-with-vuex.md +++ b/docs/zh/guides/using-with-vuex.md @@ -95,7 +95,7 @@ describe('Actions.vue', () => { 然后我们用 `new Vuex.Store` 伪造了一个 store 并填入假数据。我们只把它传递给 action，因为我们只关心这个。 -该 action 是 [Jest 伪造函数](https://jestjs.io/docs/en/mock-functions.html)。这些伪造函数让我们去断言该 action 是否被调用。 +该 action 是 [Jest 伪造函数](https://jestjs.io/docs/zh-Hans/mock-functions)。这些伪造函数让我们去断言该 action 是否被调用。 然后我们可以在我们的测试中断言 action 存根是否如预期般被调用。 @@ -154,13 +154,13 @@ describe('Getters.vue', () => { }) }) - it('在第一个 p 标签中渲染“state.inputValue”', () => { + it('在第一个 p 标签中渲染“store.state.inputValue”', () => { const wrapper = shallowMount(Getters, { store, localVue }) const p = wrapper.find('p') expect(p.text()).toBe(getters.inputValue()) }) - it('在第二个 p 标签中渲染“state.clicks”', () => { + it('在第二个 p 标签中渲染“store.state.clicks”', () => { const wrapper = shallowMount(Getters, { store, localVue }) const p = wrapper.findAll('p').at(1) expect(p.text()).toBe(getters.clicks().toString()) @@ -245,7 +245,7 @@ describe('MyComponent.vue', () => { expect(actions.moduleActionClick).toHaveBeenCalled() }) - it('在第一个 p 标签内渲染“state.inputValue”', () => { + it('在第一个 p 标签内渲染“state.clicks', () => { const wrapper = shallowMount(MyComponent, { store, localVue }) const p = wrapper.find('p') expect(p.text()).toBe(state.clicks.toString()) @@ -290,7 +290,7 @@ Getter、mutation 和 action 全部是 JavaScript 函数，所以我们可以不 import mutations from './mutations' -test('increment increments state.count by 1', () => { +test('"increment" increments "state.count" by 1', () => { const state = { count: 0 } @@ -306,14 +306,14 @@ test('increment increments state.count by 1', () => { import getters from './getters' -test('evenOrOdd returns even if state.count is even', () => { +test('"evenOrOdd" returns even if "state.count" is even', () => { const state = { count: 2 } expect(getters.evenOrOdd(state)).toBe('even') }) -test('evenOrOdd returns odd if state.count is odd', () => { +test('"evenOrOdd" returns odd if "state.count" is odd', () => { const state = { count: 1 } @@ -354,7 +354,7 @@ import Vuex from 'vuex' import storeConfig from './store-config' import { cloneDeep } from 'lodash' -test('increments count value when increment is commited', () => { +test('increments "count" value when "increment" is commited', () => { const localVue = createLocalVue() localVue.use(Vuex) const store = new Vuex.Store(cloneDeep(storeConfig)) @@ -363,7 +363,7 @@ test('increments count value when increment is commited', () => { expect(store.state.count).toBe(1) }) -test('updates evenOrOdd getter when increment is commited', () => { +test('updates "evenOrOdd" getter when "increment" is commited', () => { const localVue = createLocalVue() localVue.use(Vuex) const store = new Vuex.Store(cloneDeep(storeConfig))