Skip to content

docs(zh): update #1159

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 20, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/guides/choosing-a-test-runner.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion docs/guides/testing-async-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down
12 changes: 6 additions & 6 deletions docs/guides/testing-single-file-components-with-jest.md
Original file line number Diff line number Diff line change
Expand Up @@ -122,15 +122,15 @@ 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.

### Coverage

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
{
Expand All @@ -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
{
Expand All @@ -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'
Expand All @@ -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', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down Expand Up @@ -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)
2 changes: 1 addition & 1 deletion docs/zh/guides/choosing-a-test-runner.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` 得到完整的单文件组件支持,但这本身是需要很多配置的。

Expand Down
6 changes: 3 additions & 3 deletions docs/zh/guides/testing-async-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` 的模拟实现大概是这个样子的:

Expand Down Expand Up @@ -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'
Expand Down
12 changes: 6 additions & 6 deletions docs/zh/guides/testing-single-file-components-with-jest.md
Original file line number Diff line number Diff line change
Expand Up @@ -120,15 +120,15 @@ 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__` 目录。

### 测试覆盖率

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
{
Expand All @@ -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
{
Expand All @@ -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'
Expand All @@ -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', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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` 且令其全局可用,这样我们就不需要在每个测试文件里导入它了:

Expand Down Expand Up @@ -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)
18 changes: 9 additions & 9 deletions docs/zh/guides/using-with-vuex.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 存根是否如预期般被调用。

Expand Down Expand Up @@ -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())
Expand Down Expand Up @@ -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())
Expand Down Expand Up @@ -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
}
Expand All @@ -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
}
Expand Down Expand Up @@ -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))
Expand All @@ -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))
Expand Down