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
}
@@ -205,7 +205,7 @@ expect(wrapper.vm.$route).toBeInstanceOf(Object)
## 其它选项
-当 `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/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/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..ad1000ad5 100644
--- a/docs/zh/guides/testing-async-components.md
+++ b/docs/zh/guides/testing-async-components.md
@@ -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())
})