0,text1
- 类型：`{ [name: string]: Component | boolean } | Array`
-将子组件存根。可以是一个要存根的组件名的数组或对象。如果 `stubs` 是一个数组，则每个存根都是一个 ``。
+将子组件存根。可以是一个要存根的组件名的数组或对象。如果 `stubs` 是一个数组，则每个存根都是一个 `<${component name}-stub>`。
示例：
@@ -109,7 +109,7 @@ mount(Component, {
stubs: ['registered-component']
})
-shallow(Component, {
+shallowMount(Component, {
stubs: {
// 使用一个特定的实现作为存根
'registered-component': Foo,
@@ -129,7 +129,7 @@ shallow(Component, {
```js
const $route = { path: 'http://www.example-path.com' }
-const wrapper = shallow(Component, {
+const wrapper = shallowMount(Component, {
mocks: {
$route
}
@@ -198,14 +198,12 @@ expect(wrapper.vm.$route).toBeInstanceOf(Object)
- 类型：`boolean`
- 默认值：`true`
-将所有的侦听器都设置为同步执行。
-
当 `sync` 是 `true` 时，这个 Vue 组件会被同步渲染。
当 `sync` 是 `false` 时，这个 Vue 组件会被异步渲染。
## 其它选项
-当 `mount` 和 `shallow` 的选项包含了挂载选项之外的选项时，则会将它们通过[扩展](https://vuejs.org/v2/api/#extends)覆写到其组件选项。
+当 `mount` 和 `shallowMount` 的选项包含了挂载选项之外的选项时，则会将它们通过[扩展](https://vuejs.org/v2/api/#extends)覆写到其组件选项。
```js
const Component = {
diff --git a/docs/zh/api/selectors.md b/docs/zh/api/selectors.md
index 087105349..f6f44ec94 100644
--- a/docs/zh/api/selectors.md
+++ b/docs/zh/api/selectors.md
@@ -32,10 +32,10 @@ export default {
```
```js
-import { shallow } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'
-const wrapper = shallow(Foo)
+const wrapper = shallowMount(Foo)
expect(wrapper.is(Foo)).toBe(true)
```
diff --git a/docs/zh/api/wrapper-array/README.md b/docs/zh/api/wrapper-array/README.md
index d0a5504c6..576dacae2 100644
--- a/docs/zh/api/wrapper-array/README.md
+++ b/docs/zh/api/wrapper-array/README.md
@@ -2,17 +2,17 @@
一个 `WrapperArray` 是一个包含 [`Wrapper`](../wrapper/README.md) 数组以及 `Wrapper` 的测试方法等对象。
-- **属性：**
+## 属性
### `wrappers`
`array`: 包含在 `WrapperArray` 内的 `Wrappers`
-###`length`
+### `length`
`number`：该 `WrapperArray` 中包含的 `Wrapper` 的数量。
- - **方法：**
+## 方法
!!!include(docs/zh/api/wrapper-array/at.md)!!!
!!!include(docs/zh/api/wrapper-array/contains.md)!!!
@@ -24,4 +24,4 @@
!!!include(docs/zh/api/wrapper-array/setData.md)!!!
!!!include(docs/zh/api/wrapper-array/setMethods.md)!!!
!!!include(docs/zh/api/wrapper-array/setProps.md)!!!
-!!!include(docs/zh/api/wrapper-array/trigger.md)!!!
\ No newline at end of file
+!!!include(docs/zh/api/wrapper-array/trigger.md)!!!
diff --git a/docs/zh/api/wrapper-array/at.md b/docs/zh/api/wrapper-array/at.md
index f7792f3b9..18ca8fdf8 100644
--- a/docs/zh/api/wrapper-array/at.md
+++ b/docs/zh/api/wrapper-array/at.md
@@ -10,10 +10,10 @@
- **示例：**
```js
-import { shallow } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'
-const wrapper = shallow(Foo)
+const wrapper = shallowMount(Foo)
const divArray = wrapper.findAll('div')
const secondDiv = divArray.at(1)
expect(secondDiv.is('p')).toBe(true)
diff --git a/docs/zh/api/wrapper-array/contains.md b/docs/zh/api/wrapper-array/contains.md
index 4ffd74873..f8f7cf320 100644
--- a/docs/zh/api/wrapper-array/contains.md
+++ b/docs/zh/api/wrapper-array/contains.md
@@ -12,11 +12,11 @@
- **示例：**
```js
-import { shallow } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'
import Bar from './Bar.vue'
-const wrapper = shallow(Foo)
+const wrapper = shallowMount(Foo)
const divArray = wrapper.findAll('div')
expect(divArray.contains('p')).toBe(true)
expect(divArray.contains(Bar)).toBe(true)
diff --git a/docs/zh/api/wrapper-array/filter.md b/docs/zh/api/wrapper-array/filter.md
index 4a8d86fb9..62e70ddfb 100644
--- a/docs/zh/api/wrapper-array/filter.md
+++ b/docs/zh/api/wrapper-array/filter.md
@@ -14,9 +14,9 @@
- **示例：**
```js
-import { shallow } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'
-const wrapper = shallow(Foo)
+const wrapper = shallowMount(Foo)
const filteredDivArray = wrapper.findAll('div').filter(w => !w.hasClass('filtered'))
```
diff --git a/docs/zh/api/wrapper/README.md b/docs/zh/api/wrapper/README.md
index 2bc8d77c7..33ba40780 100644
--- a/docs/zh/api/wrapper/README.md
+++ b/docs/zh/api/wrapper/README.md
@@ -1,16 +1,14 @@
-## Wrapper
+# Wrapper
Vue Test Utils 是一个基于包裹器的 API。
一个 `Wrapper` 是一个包括了一个挂载组件或 vnode，以及测试该组件或 vnode 的方法。
-- **属性：**
+## 属性
### `vm`
-`Component`：这是该 Vue 实例。你可以通过 `wrapper.vm` 访问一个实例所有的[方法和属性](https://vuejs.org/v2/api/#Instance-Properties)。
-
-这只存在于 Vue 组件包裹器中
+`Component`：这是该 Vue 实例。你可以通过 `wrapper.vm` 访问一个实例所有的[方法和属性](https://vuejs.org/v2/api/#Instance-Properties)。这只存在于 Vue 组件包裹器中。
### `element`
@@ -18,13 +16,15 @@ Vue Test Utils 是一个基于包裹器的 API。
### `options`
-`Object`：一个对象，包含传递给 `mount` 或 `shallow` 的 Vue Test Utils 选项
-
#### `options.attachedToDom`
-`Boolean`：如果 `attachToDom` 传递给了 `mount` 或 `shallow` 则为真
+`Boolean`：如果 `attachToDom` 传递给了 `mount` 或 `shallowMount` 则为真
+
+#### `options.sync`
+
+`Boolean`：如果挂载选项里的 `sync` 不是 `false` 则为真
-- **方法：**
+## 方法
!!!include(docs/zh/api/wrapper/attributes.md)!!!
!!!include(docs/zh/api/wrapper/classes.md)!!!
diff --git a/docs/zh/api/wrapper/emitted.md b/docs/zh/api/wrapper/emitted.md
index c266db828..06e242b8f 100644
--- a/docs/zh/api/wrapper/emitted.md
+++ b/docs/zh/api/wrapper/emitted.md
@@ -44,7 +44,7 @@ expect(wrapper.emitted('foo').length).toBe(2)
expect(wrapper.emitted('foo')[1]).toEqual([123])
```
-该 `.emitted() 方法每次被调用时都返回相同的对象，而不是返回一个新的，所以当新事件被触发时该对象会被更新：
+该 `.emitted()` 方法每次被调用时都返回相同的对象，而不是返回一个新的，所以当新事件被触发时该对象会被更新：
```js
const emitted = wrapper.emitted()
diff --git a/docs/zh/api/wrapper/setData.md b/docs/zh/api/wrapper/setData.md
index 4efb348cf..a86ea5f44 100644
--- a/docs/zh/api/wrapper/setData.md
+++ b/docs/zh/api/wrapper/setData.md
@@ -1,6 +1,8 @@
## setData(data)
-设置 `Wrapper` `vm` 的属性并强制更新。
+设置 `Wrapper` `vm` 的属性。
+
+`setData` 通过合并现有的属性生效，被覆写的数组除外。
**注意：该包裹器必须包含一个 Vue 示例。**
diff --git a/docs/zh/guides/common-tips.md b/docs/zh/guides/common-tips.md
index eb0e3a18d..aaafbad89 100644
--- a/docs/zh/guides/common-tips.md
+++ b/docs/zh/guides/common-tips.md
@@ -18,12 +18,12 @@
额外的，对于包含许多子组件的组件来说，整个渲染树可能会非常大。重复渲染所有的子组件可能会让我们的测试变慢。
-Vue Test Utils 允许你通过 `shallow` 方法只挂载一个组件而不渲染其子组件 (即保留它们的存根)：
+Vue Test Utils 允许你通过 `shallowMount` 方法只挂载一个组件而不渲染其子组件 (即保留它们的存根)：
```js
-import { shallow } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
-const wrapper = shallow(Component) // 返回一个包裹器，包含一个挂载的组件实例
+const wrapper = shallowMount(Component) // 返回一个包裹器，包含一个挂载的组件实例
wrapper.vm // 挂载的 Vue 实例
```
diff --git a/docs/zh/guides/testing-SFCs-with-karma.md b/docs/zh/guides/testing-SFCs-with-karma.md
index 84c889524..6b0dbb16d 100644
--- a/docs/zh/guides/testing-SFCs-with-karma.md
+++ b/docs/zh/guides/testing-SFCs-with-karma.md
@@ -106,12 +106,12 @@ export default {
```js
import { expect } from 'chai'
-import { shallow } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
import Counter from '../src/Counter.vue'
describe('Counter.vue', () => {
it('increments count when button is clicked', () => {
- const wrapper = shallow(Counter)
+ const wrapper = shallowMount(Counter)
wrapper.find('button').trigger('click')
expect(wrapper.find('div').text()).contains('1')
})
diff --git a/docs/zh/guides/testing-SFCs-with-mocha-webpack.md b/docs/zh/guides/testing-SFCs-with-mocha-webpack.md
index 73a1997a7..257c99713 100644
--- a/docs/zh/guides/testing-SFCs-with-mocha-webpack.md
+++ b/docs/zh/guides/testing-SFCs-with-mocha-webpack.md
@@ -150,12 +150,12 @@ export default {
然后创建一个名为 `test/Counter.spec.js` 的测试文件并写入如下代码：
```js
-import { shallow } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
import Counter from '../src/Counter.vue'
describe('Counter.vue', () => {
it('计数器在点击按钮时自增', () => {
- const wrapper = shallow(Counter)
+ const wrapper = shallowMount(Counter)
wrapper.find('button').trigger('click')
expect(wrapper.find('div').text()).toMatch('1')
})
diff --git a/docs/zh/guides/testing-async-components.md b/docs/zh/guides/testing-async-components.md
index 89f6a71e5..8576f3acd 100644
--- a/docs/zh/guides/testing-async-components.md
+++ b/docs/zh/guides/testing-async-components.md
@@ -1,6 +1,6 @@
## 测试异步行为
-为了让测试变得简单，`vue-test-utils` _同步_应用 DOM 更新。不过当测试一个带有回调或 Promise 等异步行为的组件时，你需要留意一些技巧。
+为了让测试变得简单，`@vue/test-utils` _同步_应用 DOM 更新。不过当测试一个带有回调或 Promise 等异步行为的组件时，你需要留意一些技巧。
API 调用和 Vuex action 都是最常见的异步行为之一。下列例子展示了如何测试一个会调用到 API 的方法。这个例子使用 Jest 运行测试用例同时模拟了 HTTP 库 `axios`。更多关于 Jest 的手动模拟的介绍可移步[这里](https://facebook.github.io/jest/docs/en/manual-mocks.html#content)。
@@ -44,13 +44,13 @@ export default {
测试用例可以写成像这样：
``` js
-import { shallow } from 'vue-test-utils'
+import { shallowMount } from '@vue/test-utils'
import Foo from './Foo'
jest.mock('axios')
test('Foo', () => {
it('fetches async when a button is clicked', () => {
- const wrapper = shallow(Foo)
+ const wrapper = shallowMount(Foo)
wrapper.find('button').trigger('click')
expect(wrapper.vm.value).toBe('value')
})
@@ -62,7 +62,7 @@ test('Foo', () => {
``` js
test('Foo', () => {
it('fetches async when a button is clicked', (done) => {
- const wrapper = shallow(Foo)
+ const wrapper = shallowMount(Foo)
wrapper.find('button').trigger('click')
wrapper.vm.$nextTick(() => {
expect(wrapper.vm.value).toBe('value')
@@ -79,14 +79,14 @@ test('Foo', () => {
The updated test looks like this:
``` js
-import { shallow } from 'vue-test-utils'
+import { shallowMount } from '@vue/test-utils'
import flushPromises from 'flush-promises'
import Foo from './Foo'
jest.mock('axios')
test('Foo', () => {
it('fetches async when a button is clicked', async () => {
- const wrapper = shallow(Foo)
+ const wrapper = shallowMount(Foo)
wrapper.find('button').trigger('click')
await flushPromises()
expect(wrapper.vm.value).toBe('value')
diff --git a/docs/zh/guides/using-with-vue-router.md b/docs/zh/guides/using-with-vue-router.md
index 9dbb51c68..42b170331 100644
--- a/docs/zh/guides/using-with-vue-router.md
+++ b/docs/zh/guides/using-with-vue-router.md
@@ -7,14 +7,14 @@
为了避免这样的事情发生，我们创建了一个 `localVue` 并对其安装 Vue Router。
```js
-import { shallow, createLocalVue } from '@vue/test-utils'
+import { shallowMount, createLocalVue } from '@vue/test-utils'
import VueRouter from 'vue-router'
const localVue = createLocalVue()
localVue.use(VueRouter)
const router = new VueRouter()
-shallow(Component, {
+shallowMount(Component, {
localVue,
router
})
@@ -31,9 +31,9 @@ shallow(Component, {
### 使用存根
```js
-import { shallow } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
-shallow(Component, {
+shallowMount(Component, {
stubs: ['router-link', 'router-view']
})
```
@@ -41,13 +41,13 @@ shallow(Component, {
### 为 localVue 安装 Vue Router
```js
-import { shallow, createLocalVue } from '@vue/test-utils'
+import { shallowMount, createLocalVue } from '@vue/test-utils'
import VueRouter from 'vue-router'
const localVue = createLocalVue()
localVue.use(VueRouter)
-shallow(Component, {
+shallowMount(Component, {
localVue
})
```
@@ -57,13 +57,13 @@ shallow(Component, {
有的时候你想要测试一个组件在配合 `$route` 和 `$router` 对象的参数时的行为。这时候你可以传递自定义假数据给 Vue 实例。
```js
-import { shallow } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
const $route = {
path: '/some/path'
}
-const wrapper = shallow(Component, {
+const wrapper = shallowMount(Component, {
mocks: {
$route
}
diff --git a/docs/zh/guides/using-with-vuex.md b/docs/zh/guides/using-with-vuex.md
index e902ca281..1562b73c7 100644
--- a/docs/zh/guides/using-with-vuex.md
+++ b/docs/zh/guides/using-with-vuex.md
@@ -44,7 +44,7 @@ export default{
我们来看看它的样子：
``` js
-import { shallow, createLocalVue } from '@vue/test-utils'
+import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import Actions from '../../../src/components/Actions'
@@ -68,7 +68,7 @@ describe('Actions.vue', () => {
})
it('当输入框的值是“input”且一个“input”事件被触发时会调用“actionInput”的 action', () => {
- const wrapper = shallow(Actions, { store, localVue })
+ const wrapper = shallowMount(Actions, { store, localVue })
const input = wrapper.find('input')
input.element.value = 'input'
input.trigger('input')
@@ -76,7 +76,7 @@ describe('Actions.vue', () => {
})
it('当输入框的值不是“input”但有“input”事件触发时不会掉用“actionInput”的 action', () => {
- const wrapper = shallow(Actions, { store, localVue })
+ const wrapper = shallowMount(Actions, { store, localVue })
const input = wrapper.find('input')
input.element.value = 'not input'
input.trigger('input')
@@ -84,7 +84,7 @@ describe('Actions.vue', () => {
})
it('当按钮被点击时候调用“actionClick”的 action', () => {
- const wrapper = shallow(Actions, { store, localVue })
+ const wrapper = shallowMount(Actions, { store, localVue })
wrapper.find('button').trigger('click')
expect(actions.actionClick).toHaveBeenCalled()
})
@@ -135,7 +135,7 @@ export default{
让我们看看这个测试：
``` js
-import { shallow, createLocalVue } from '@vue/test-utils'
+import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import Getters from '../../../src/components/Getters'
@@ -159,20 +159,20 @@ describe('Getters.vue', () => {
})
it('在第一个 p 标签中渲染“state.inputValue”', () => {
- const wrapper = shallow(Getters, { store, localVue })
+ const wrapper = shallowMount(Getters, { store, localVue })
const p = wrapper.find('p')
expect(p.text()).toBe(getters.inputValue())
})
it('在第二个 p 标签中渲染“state.clicks”', () => {
- const wrapper = shallow(Getters, { store, localVue })
+ const wrapper = shallowMount(Getters, { store, localVue })
const p = wrapper.findAll('p').at(1)
expect(p.text()).toBe(getters.clicks().toString())
})
})
```
-这个测试和我们的 action 测试很相似。我们在每个测试运行之前创建了一个伪造的 store，在我们调用 `shallow` 的时候将其以一个选项传递进去，并断言我们伪造的 getter 的返回值被渲染。
+这个测试和我们的 action 测试很相似。我们在每个测试运行之前创建了一个伪造的 store，在我们调用 `shallowMount` 的时候将其以一个选项传递进去，并断言我们伪造的 getter 的返回值被渲染。
这非常好，但是如果我们想要检查我们的 getter 是否返回了正确的 state 的部分该怎么办呢？
@@ -212,7 +212,7 @@ export default{
其测试：
``` js
-import { shallow, createLocalVue } from '@vue/test-utils'
+import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import Modules from '../../../src/components/Modules'
import module from '../../../src/store/module'
@@ -245,14 +245,14 @@ describe('Modules.vue', () => {
})
it('在点击按钮时调用 action“moduleActionClick”', () => {
- const wrapper = shallow(Modules, { store, localVue })
+ const wrapper = shallowMount(Modules, { store, localVue })
const button = wrapper.find('button')
button.trigger('click')
expect(actions.moduleActionClick).toHaveBeenCalled()
})
it('在第一个 p 标签内渲染“state.inputValue”', () => {
- const wrapper = shallow(Modules, { store, localVue })
+ const wrapper = shallowMount(Modules, { store, localVue })
const p = wrapper.find('p')
expect(p.text()).toBe(state.module.clicks.toString())
})