diff --git a/docs/zh/README.md b/docs/zh/README.md
index b76393ac1..25fe3d77e 100644
--- a/docs/zh/README.md
+++ b/docs/zh/README.md
@@ -11,6 +11,7 @@ Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。
* [用 Mocha 和 webpack 测试单文件组件](guides/testing-single-file-components-with-mocha-webpack.md)
* [用 Karma 测试单文件组件](guides/testing-single-file-components-with-karma.md)
* [测试异步行为](guides/testing-async-components.md)
+ * [配合 TypeScript 使用](guides/using-with-typescript.md)
* [配合 Vue Router 使用](guides/using-with-vue-router.md)
* [配合 Vuex 实用](guides/using-with-vuex.md)
* [API](api/)
@@ -27,7 +28,9 @@ Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。
- [localVue](api/options.md#localvue)
- [attachToDocument](api/options.md#attachtodocument)
- [attrs](api/options.md#attrs)
+ - [propsData](api/options.md#propsdata)
- [listeners](api/options.md#listeners)
+ - [parentComponent](api/options.md#parentComponent)
- [provide](api/options.md#provide)
- [sync](api/options.md#sync)
- [其它选项](api/options.md#other-options)
@@ -77,5 +80,6 @@ Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。
* [TransitionGroupStub](api/components/TransitionGroupStub.md)
* [RouterLinkStub](api/components/RouterLinkStub.md)
* [选择器](api/selectors.md)
+ * [createWrapper](api/createWrapper.md)
* [createLocalVue](api/createLocalVue.md)
* [配置](api/config.md)
diff --git a/docs/zh/api/README.md b/docs/zh/api/README.md
index 11e368375..bf3b5fdf0 100644
--- a/docs/zh/api/README.md
+++ b/docs/zh/api/README.md
@@ -6,4 +6,5 @@
!!!include(docs/zh/api/renderToString.md)!!!
!!!include(docs/zh/api/selectors.md)!!!
!!!include(docs/zh/api/createLocalVue.md)!!!
+!!!include(docs/zh/api/createWrapper.md)!!!
!!!include(docs/zh/api/config.md)!!!
diff --git a/docs/zh/api/createWrapper.md b/docs/zh/api/createWrapper.md
new file mode 100644
index 000000000..3d9ac6c9e
--- /dev/null
+++ b/docs/zh/api/createWrapper.md
@@ -0,0 +1,25 @@
+## createWrapper(node [, options])
+
+- **参数:**
+
+ - `{vm|HTMLElement} node`
+ - `{Object} options`
+ - `{Boolean} sync`
+ - `{Boolean} attachedToDocument`
+
+- **返回值:**
+ - `{Wrapper}`
+
+- **用法:**
+
+`createWrapper` 为一个被挂载的 Vue 实例或一个 HTML 元素创建一个 `Wrapper`。
+
+```js
+import { createWrapper } from '@vue/test-utils'
+import Foo from './Foo.vue'
+
+const Constructor = Vue.extend(Foo)
+const vm = new Constructor().$mount()
+const wrapper = createWrapper(vm)
+expect(wrapper.vm.foo).toBe(true)
+```
diff --git a/docs/zh/api/options.md b/docs/zh/api/options.md
index 42485b56d..a2f15ac33 100644
--- a/docs/zh/api/options.md
+++ b/docs/zh/api/options.md
@@ -9,9 +9,10 @@
- [`mocks`](#mocks)
- [`localVue`](#localvue)
- [`attachToDocument`](#attachtodocument)
+- [`propsData`](#propsdata)
- [`attrs`](#attrs)
- [`listeners`](#listeners)
-- [`parentComponent`](#parentComponent)
+- [`parentComponent`](#parentcomponent)
- [`provide`](#provide)
- [`sync`](#sync)
@@ -19,7 +20,7 @@
- 类型:`Object`
-将上下文传递给函数式组件。该选项只能用于函数式组件。
+将上下文传递给函数式组件。该选项只能用于[函数式组件](https://cn.vuejs.org/v2/guide/render-function.html#函数式组件)。
示例:
@@ -47,45 +48,74 @@ expect(wrapper.is(Component)).toBe(true)
```js
import Foo from './Foo.vue'
-import Bar from './Bar.vue'
+
+const bazComponent = {
+ name: 'baz-component',
+ template: '
baz
'
+}
const wrapper = shallowMount(Component, {
slots: {
- default: [Foo, Bar],
- fooBar: Foo, // 将会匹配 ``。
+ default: [Foo, '', 'text'],
+ fooBar: Foo, // 将会匹配 ``.
foo: '',
- bar: 'bar'
+ bar: 'bar',
+ baz: bazComponent,
+ qux: ''
}
})
+
expect(wrapper.find('div')).toBe(true)
```
## scopedSlots
-- 类型:`{ [name: string]: string }`
+- 类型:`{ [name: string]: string|Function }`
-提供一个该组件所有作用域插槽内容的对象。每个键对应到插槽的名字,每个值可以是一个模板字符串。
+提供一个该组件所有作用域插槽的对象。每个键对应到插槽的名字。
-这里有三处限制。
+你可以使用 slot-scope 特性设置 prop 的名称:
-* 该选项只支持 vue@2.5+。
+```js
+shallowMount(Component, {
+ scopedSlots: {
+ foo: '{{foo.index}},{{foo.text}}
'
+ }
+})
+```
+
+否则插槽被计算的时候可以通过 `props` 对象使用 prop:
+
+```js
+shallowMount(Component, {
+ scopedSlots: {
+ default: '{{props.index}},{{props.text}}
'
+ }
+})
+```
-* 你不能在 `scopedSlots` 选项中将 `` 标签用作其根元素。
+你也可以传递一个函数将 prop 作为参数带入:
-* 我们不支持 PhantomJS。
-你可以使用 [Puppeteer](https://github.com/karma-runner/karma-chrome-launcher#headless-chromium-with-puppeteer) 作为替代品。
+```js
+shallowMount(Component, {
+ scopedSlots: {
+ foo: function (props) {
+ return this.$createElement('div', props.index)
+ }
+ }
+})
+```
-示例:
+或者你可以使用 JSX。如果你在一个方法里撰写 JSX,babel-plugin-transform-vue-jsx 会自动注入 `this.$createElement`:
```js
-const wrapper = shallowMount(Component, {
+shallowMount(Component, {
scopedSlots: {
- foo: '{{props.index}},{{props.text}}
'
+ foo (props) {
+ return { props.text }
+ }
}
})
-expect(wrapper.find('#fooWrapper').html()).toBe(
- ``
-)
```
## stubs
@@ -177,6 +207,31 @@ expect(wrapper.vm.$route).toBeInstanceOf(Object)
设置组件实例的 `$attrs` 对象。
+## propsData
+
+- 类型:`Object`
+
+在组件被挂载时设置组件实例的 prop。
+
+示例:
+
+```js
+const Component = {
+ template: '{{ msg }}
',
+ props: ['msg']
+}
+const wrapper = mount(Component, {
+ propsData: {
+ msg: 'aBC'
+ }
+})
+expect(wrapper.text()).toBe('aBC')
+```
+
+::: tip 提示
+值得注意的是 `propsData` 实际上是一个 [Vue API](https://cn.vuejs.org/v2/api/#propsData),不是 Vue Test Utils 的挂载选项。它会被 [`extends`](https://cn.vuejs.org/v2/api/#extends) 处理。请查阅[其它选项](#其它选项)。
+:::
+
## listeners
- 类型:`Object`
@@ -206,6 +261,25 @@ expect(wrapper.vm.$parent.$options.name).toBe('foo')
为组件传递用于注入的属性。可查阅 [provie/inject](https://cn.vuejs.org/v2/api/#provide-inject) 了解更多。
+示例:
+
+```js
+const Component = {
+ inject: ['foo'],
+ template: '{{this.foo()}}
'
+}
+
+const wrapper = shallowMount(Component, {
+ provide: {
+ foo () {
+ return 'fooValue'
+ }
+ }
+})
+
+expect(wrapper.text()).toBe('fooValue')
+```
+
## sync
- 类型:`boolean`
diff --git a/docs/zh/api/shallowMount.md b/docs/zh/api/shallowMount.md
index 3ff44bd93..145e4e593 100644
--- a/docs/zh/api/shallowMount.md
+++ b/docs/zh/api/shallowMount.md
@@ -89,7 +89,7 @@ describe('Foo', () => {
foo: ''
}
})
- expect(wrapper.find('div')).toBe(true)
+ expect(wrapper.contains('div')).toBe(true)
})
})
```
diff --git a/docs/zh/api/wrapper/attributes.md b/docs/zh/api/wrapper/attributes.md
index 1f393abe9..8e0704343 100644
--- a/docs/zh/api/wrapper/attributes.md
+++ b/docs/zh/api/wrapper/attributes.md
@@ -1,8 +1,11 @@
-## attributes()
+## attributes([key])
-返回 `Wrapper` DOM 节点的特性对象。
+返回 `Wrapper` DOM 节点的特性对象。如果提供了 `key`,则返回这个 `key` 对应的值。
-- **返回值:**`{[attribute: string]: any}`
+- **参数:**
+ - `{string} key` **可选的**
+
+- **返回值:**`{[attribute: string]: any} | string`
- **示例:**
@@ -12,4 +15,5 @@ import Foo from './Foo.vue'
const wrapper = mount(Foo)
expect(wrapper.attributes().id).toBe('foo')
+expect(wrapper.attributes('id')).toBe('foo')
```
diff --git a/docs/zh/api/wrapper/classes.md b/docs/zh/api/wrapper/classes.md
index 1702e27bb..0b3bb807b 100644
--- a/docs/zh/api/wrapper/classes.md
+++ b/docs/zh/api/wrapper/classes.md
@@ -1,10 +1,13 @@
-## classes()
+## classes([className])
返回 `Wrapper` DOM 节点的 class。
-返回 class 名称的数组。
+返回 class 名称的数组。或在提供 class 名的时候返回一个布尔值。
-- **返回值:**`Array<{string}>`
+- **参数:**
+ - `{string} className` **可选的**
+
+- **返回值:**`Array<{string}> | boolean`
- **示例:**
@@ -14,4 +17,5 @@ import Foo from './Foo.vue'
const wrapper = mount(Foo)
expect(wrapper.classes()).toContain('bar')
+expect(wrapper.classes('bar')).toBe(true)
```
diff --git a/docs/zh/api/wrapper/props.md b/docs/zh/api/wrapper/props.md
index a00a8b3fc..4f6862902 100644
--- a/docs/zh/api/wrapper/props.md
+++ b/docs/zh/api/wrapper/props.md
@@ -1,10 +1,13 @@
-## props()
+## props([key])
-返回 `Wrapper` `vm` 的 props 对象。
+返回 `Wrapper` `vm` 的 props 对象。如果提供了 `key`,则返回这个 `key` 对应的值。
**注意:该包裹器必须包含一个 Vue 示例。**
-- **返回值:**`{[prop: string]: any}`
+- **参数:**
+ - `{string} key` **可选的**
+
+- **返回值:**`{[prop: string]: any} | any`
- **示例:**
@@ -18,4 +21,5 @@ const wrapper = mount(Foo, {
}
})
expect(wrapper.props().bar).toBe('baz')
+expect(wrapper.props('bar')).toBe('baz')
```
diff --git a/docs/zh/api/wrapper/setChecked.md b/docs/zh/api/wrapper/setChecked.md
index e5c65da43..64078d2c3 100644
--- a/docs/zh/api/wrapper/setChecked.md
+++ b/docs/zh/api/wrapper/setChecked.md
@@ -12,8 +12,8 @@ import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'
const wrapper = mount(Foo)
-const option = wrapper.find('input[type="radio"]')
-option.setChecked()
+const radioInput = wrapper.find('input[type="radio"]')
+radioInput.setChecked()
```
- **注意:**
diff --git a/docs/zh/api/wrapper/setValue.md b/docs/zh/api/wrapper/setValue.md
index f9f0e6570..82ee130c1 100644
--- a/docs/zh/api/wrapper/setValue.md
+++ b/docs/zh/api/wrapper/setValue.md
@@ -13,8 +13,8 @@ import Foo from './Foo.vue'
const wrapper = mount(Foo)
-const input = wrapper.find('input[type="text"]')
-input.setValue('some value')
+const textInput = wrapper.find('input[type="text"]')
+textInput.setValue('some value')
const select = wrapper.find('select')
select.setValue('option value')
diff --git a/docs/zh/guides/README.md b/docs/zh/guides/README.md
index c90eabf8e..a7ee38b49 100644
--- a/docs/zh/guides/README.md
+++ b/docs/zh/guides/README.md
@@ -8,5 +8,6 @@
!!!include(docs/zh/guides/testing-single-file-components-with-mocha-webpack.md)!!!
!!!include(docs/zh/guides/testing-single-file-components-with-karma.md)!!!
!!!include(docs/zh/guides/testing-async-components.md)!!!
+!!!include(docs/zh/guides/using-with-typescript.md)!!!
!!!include(docs/zh/guides/using-with-vue-router.md)!!!
-!!!include(docs/zh/guides/using-with-vuex.md)!!!
\ No newline at end of file
+!!!include(docs/zh/guides/using-with-vuex.md)!!!
diff --git a/docs/zh/guides/common-tips.md b/docs/zh/guides/common-tips.md
index 4fd57edcf..3b75e7bf7 100644
--- a/docs/zh/guides/common-tips.md
+++ b/docs/zh/guides/common-tips.md
@@ -132,6 +132,20 @@ mount(Component, {
})
```
+### 存根组件
+
+你可以使用 `stubs` 选项覆写全局或局部注册的组件:
+
+```js
+import { mount } from '@vue/test-utils'
+
+mount(Component, {
+ // 将会把 globally-registered-component 解析为
+ // 空的存根
+ stubs: ['globally-registered-component']
+})
+```
+
### 处理路由
因为路由需要在应用的全局结构中进行定义,且引入了很多组件,所以最好集成到 end-to-end 测试。对于依赖 `vue-router` 功能的独立的组件来说,你可以使用上面提到的技术仿造它们。
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 80b9a4598..45d124c9c 100644
--- a/docs/zh/guides/testing-single-file-components-with-jest.md
+++ b/docs/zh/guides/testing-single-file-components-with-jest.md
@@ -47,7 +47,7 @@ npm install --save-dev vue-jest
],
"transform": {
// 用 `vue-jest` 处理 `*.vue` 文件
- ".*\\.(vue)$": "/node_modules/vue-jest"
+ ".*\\.(vue)$": "vue-jest"
}
}
}
@@ -122,31 +122,6 @@ npm install --save-dev babel-jest
}
```
-### 测试快照
-
-你可以使用 [`vue-server-renderer`](https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer) 将组件渲染为一个字符串,这样它就可以为 [Jest 快照测试](https://facebook.github.io/jest/docs/en/snapshot-testing.html) 保存一个快照。
-
-`vue-server-renderer` 的渲染结果包含了一些服务端渲染特有的特性,且忽略空格,也不易于检索变更。我们可以通过一个自定义的序列化程序来改进被保存的快照:
-
-``` bash
-npm install --save-dev jest-serializer-vue
-```
-
-然后在 `package.json` 中配置它:
-
-``` json
-{
- // ...
- "jest": {
- // ...
- // 快照的序列化程序
- "snapshotSerializers": [
- "/node_modules/jest-serializer-vue"
- ]
- }
-}
-```
-
### 放置测试文件
默认情况下,Jest 将会递归的找到整个工程里所有 `.spec.js` 或 `.test.js` 扩展名的文件。如果这不符合你的需求,你也可以在 `package.json` 里的配置段落中[改变它的 `testRegex`](https://facebook.github.io/jest/docs/en/configuration.html#testregex-string)。
@@ -201,6 +176,38 @@ describe('Component', () => {
})
```
+### 快照测试
+
+当你用 Vue Test Utils 挂载一个组件时,你可以访问到 HTML 根元素。这可以保存为一个快照为 [Jest 快照测试](https://facebook.github.io/jest/docs/en/snapshot-testing.html)所用。
+
+```js
+test('renders correctly', () => {
+ const wrapper = mount(Component)
+ expect(wrapper.element).toMatchSnapshot()
+})
+```
+
+我们可以通过一个自定义的序列化工具改进被保存的快照:
+
+``` bash
+npm install --save-dev jest-serializer-vue
+```
+
+然后在 `package.json` 中配置它:
+
+``` json
+{
+ // ...
+ "jest": {
+ // ...
+ // 快照的序列化工具
+ "snapshotSerializers": [
+ "jest-serializer-vue"
+ ]
+ }
+}
+```
+
### 相关资料
- [该设置的示例工程](https://github.com/vuejs/vue-test-utils-jest-example)
diff --git a/docs/zh/guides/using-with-typescript.md b/docs/zh/guides/using-with-typescript.md
new file mode 100644
index 000000000..12d3e3e1f
--- /dev/null
+++ b/docs/zh/guides/using-with-typescript.md
@@ -0,0 +1,157 @@
+## 配合 TypeScript 使用
+
+> 我们在 [GitHub](https://github.com/vuejs/vue-test-utils-typescript-example) 上放有一个关于这些设置的示例工程。
+
+TypeScript 是一个流行的 JavaScript 超集,它在普通 JS 的基础上加入了类型 (type) 和类 (class)。Vue Test Utils 在发行包中包含了类型信息,因此它可以很好的和 TypeScript 配合使用。
+
+在这份指南中,我们会介绍如何基于 Vue CLI 的 TypeScript 设置,使用 Jest 和 Vue Test Utils 为一个 TypeScript 工程建立测试。
+
+### 加入 TypeScript
+
+首先,你需要创建一个工程。如果你还没有安装 Vue CLI 的话,请先全局安装:
+
+```shell
+$ npm install -g @vue/cli
+```
+
+然后通过下列命令创建一个工程:
+
+```shell
+$ vue create hello-world
+```
+
+在 CLI 提示符中,选择 `Manually select features` (手动选择特性),并选中 TypeScript 回车。这将会创建一个配置好 TypeScript 的工程。
+
+::: tip 注意
+如果你想要了解更多用 TypeScript 设置 Vue 的细节,请移步 [TypeScript Vue starter guide](https://github.com/Microsoft/TypeScript-Vue-Starter)。
+:::
+
+下一步就是把 Jest 添加到工程中。
+
+### 设置 Jest
+
+Jest 是一个由 Facebook 研发的测试运行器,它致力于提供一个低能耗的测试解决方案。你可以在其[官方文档](https://facebook.github.io/jest/)中了解更多 Jest 的情况。
+
+安装 Jest 和 Vue Test Utils:
+
+```bash
+$ npm install --save-dev jest @vue/test-utils
+```
+
+接下来在 `package.json` 里定义一个 `test:unit` 脚本。
+
+```json
+// package.json
+{
+ // ..
+ "scripts": {
+ // ..
+ "test:unit": "jest"
+ }
+ // ..
+}
+```
+
+### 在 Jest 中执行单文件组件
+
+为了讲解 Jest 如何处理 `*.vue` 文件,我们需要安装并配置 `vue-jest` 预处理器:
+
+``` bash
+npm install --save-dev vue-jest
+```
+
+然后在 `package.json` 里创建一个 `jest` 块:
+
+``` json
+{
+ // ...
+ "jest": {
+ "moduleFileExtensions": [
+ "js",
+ "ts",
+ "json",
+ // 告诉 Jest 处理 `*.vue` 文件
+ "vue"
+ ],
+ "transform": {
+ // 用 `vue-jest` 处理 `*.vue` 文件
+ ".*\\.(vue)$": "vue-jest",
+ },
+ "testURL": "http://localhost/"
+ }
+}
+```
+
+### 为 Jest 配置 TypeScript
+
+为了在测试中使用 TypeScript 文件,我们需要在 Jest 中设置编译 TypeScript。为此我们需要安装 `ts-jest`:
+
+``` bash
+$ npm install --save-dev ts-jest
+```
+
+接下来,我们需要在 `package.json` 中的 `jest.transform` 中加入一个入口告诉 Jest 使用 `ts-jest` 处理 TypeScript 测试文件:
+
+``` json
+{
+ // ...
+ "jest": {
+ // ...
+ "transform": {
+ // ...
+ // 用 `ts-jest` 处理 `*.ts` 文件
+ "^.+\\.tsx?$": "ts-jest"
+ },
+ // ...
+ }
+}
+```
+
+### 放置测试文件
+
+默认情况下,Jest 将会在整个工程里递归地找到所有的 `.spec.js` 或 `.test.js` 扩展名文件。
+
+我们需要改变 `package.json` 文件里的 `testRegex` 配置项以运行 `.ts` 扩展名的测试文件。
+
+在 `package.json` 中添加以下 `jest` 字段:
+
+``` json
+{
+ // ...
+ "jest": {
+ // ...
+ "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$"
+ }
+}
+```
+
+Jest 推荐我们在被测试的代码旁边创建一个 `__tests__` 目录,但你完全可以根据自己的喜好组织你的测试文件。只是要注意 Jest 会在进行截图测试的时候在测试文件旁边创建一个 `__snapshots__` 目录。
+
+### 撰写一个单元测试
+
+现在我们已经把工程设置好了,是时候撰写一个单元测试了。
+
+创建一个 `src/components/__tests__/HelloWorld.spec.ts` 文件,并加入如下代码:
+
+```js
+// src/components/__tests__/HelloWorld.spec.ts
+import { shallowMount } from '@vue/test-utils'
+import HelloWorld from '../HelloWorld.vue'
+
+describe('HelloWorld.vue', () => {
+ test('renders props.msg when passed', () => {
+ const msg = 'new message'
+ const wrapper = shallowMount(HelloWorld, {
+ propsData: { msg }
+ })
+ expect(wrapper.text()).toMatch(msg)
+ })
+})
+```
+
+这就是我们让 TypeScript 和 Vue Test Utils 一起工作所需要的全部工作!
+
+### 相关资料
+
+- [该设置的示例工程](https://github.com/vuejs/vue-test-utils-typescript-example)
+- [Jest](https://facebook.github.io/jest/)