From 9f54548fc11542e8b7ac474676d6d0e5dcb5f543 Mon Sep 17 00:00:00 2001 From: Jinjiang Date: Sun, 27 May 2018 00:37:13 +0800 Subject: [PATCH 1/2] [docs][zh] updated to b15fc5f --- docs/zh/README.md | 2 +- docs/zh/SUMMARY.md | 74 ----------------------------- docs/zh/api/config.md | 2 + docs/zh/api/options.md | 2 - docs/zh/api/wrapper-array/README.md | 8 ++-- docs/zh/api/wrapper/README.md | 16 +++---- docs/zh/api/wrapper/emitted.md | 2 +- docs/zh/api/wrapper/setData.md | 4 +- 8 files changed, 19 insertions(+), 91 deletions(-) delete mode 100644 docs/zh/SUMMARY.md diff --git a/docs/zh/README.md b/docs/zh/README.md index 4507db7f5..4b54df15c 100644 --- a/docs/zh/README.md +++ b/docs/zh/README.md @@ -1,4 +1,4 @@ -# Vue Test Utils +# 介绍 Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。 diff --git a/docs/zh/SUMMARY.md b/docs/zh/SUMMARY.md deleted file mode 100644 index 001f939a7..000000000 --- a/docs/zh/SUMMARY.md +++ /dev/null @@ -1,74 +0,0 @@ -## 目录 - -* [教程](guides/README.md) - * [起步](guides/getting-started.md) - * [常用技巧](guides/common-tips.md) - * [鼠标、键盘以及其它 DOM 事件](guides/dom-events.md) - * [选择一个测试运行器](guides/choosing-a-test-runner.md) - * [用 Jest 测试单文件组件](guides/testing-SFCs-with-jest.md) - * [用 Mocha 和 webpack 测试单文件组件](guides/testing-SFCs-with-mocha-webpack.md) - * [用 Karma 测试单文件组件](guides/testing-SFCs-with-karma.md) - * [测试异步行为](guides/testing-async-components.md) - * [配合 Vue Router 使用](guides/using-with-vue-router.md) -  * [配合 Vuex 使用](guides/using-with-vuex.md) -* [API](api/README.md) - * [mount](api/mount.md) - * [shallowMount](api/shallowMount.md) - * [render](api/render.md) - * [renderToString](api/renderToString.md) - * [挂载选项](api/options.md) - - [context](api/options.md#context) - - [slots](api/options.md#slots) - - [scopedSlots](api/options.md#scopedslots) - - [stubs](api/options.md#stubs) - - [mocks](api/options.md#mocks) - - [localVue](api/options.md#localvue) - - [attachToDocument](api/options.md#attachtodocument) - - [attrs](api/options.md#attrs) - - [listeners](api/options.md#listeners) - - [provide](api/options.md#provide) - - [sync](api/options.md#sync) - - [其它选项](api/options.md#other-options) - * [Wrapper](api/wrapper/README.md) - * [attributes](api/wrapper/attributes.md) - * [classes](api/wrapper/classes.md) - * [contains](api/wrapper/contains.md) - * [emitted](api/wrapper/emitted.md) - * [emittedByOrder](api/wrapper/emittedByOrder.md) - * [exists](api/wrapper/exists.md) - * [destroy](api/wrapper/destroy.md) - * [find](api/wrapper/find.md) - * [findAll](api/wrapper/findAll.md) - * [html](api/wrapper/html.md) - * [is](api/wrapper/is.md) - * [isEmpty](api/wrapper/isEmpty.md) - * [isVueInstance](api/wrapper/isVueInstance.md) - * [name](api/wrapper/name.md) - * [props](api/wrapper/props.md) - * [setData](api/wrapper/setData.md) - * [setMethods](api/wrapper/setMethods.md) - * [setProps](api/wrapper/setProps.md) - * [text](api/wrapper/text.md) - * [trigger](api/wrapper/trigger.md) - * [isVisible](api/wrapper/isVisible.md) - * [WrapperArray](api/wrapper-array/README.md) - * [at](api/wrapper-array/at.md) - * [contains](api/wrapper-array/contains.md) - * [exists](api/wrapper/exists.md) - * [destroy](api/wrapper-array/destroy.md) - * [filter](api/wrapper-array/filter.md) - * [is](api/wrapper-array/is.md) - * [isEmpty](api/wrapper-array/isEmpty.md) - * [isVueInstance](api/wrapper-array/isVueInstance.md) - * [setData](api/wrapper-array/setData.md) - * [setMethods](api/wrapper-array/setMethods.md) - * [setProps](api/wrapper-array/setProps.md) - * [trigger](api/wrapper-array/trigger.md) - * [isVisible](api/wrapper-array/isVisible.md) - * [组件](api/components/README.md) - * [TransitionStub](api/components/TransitionStub.md) - * [TransitionGroupStub](api/components/TransitionGroupStub.md) - * [RouterLinkStub](api/components/RouterLinkStub.md) - * [选择器](api/selectors.md) - * [createLocalVue](api/createLocalVue.md) - * [配置](api/config.md) diff --git a/docs/zh/api/config.md b/docs/zh/api/config.md index 478885640..304c139fb 100644 --- a/docs/zh/api/config.md +++ b/docs/zh/api/config.md @@ -2,6 +2,8 @@ Vue Test Utils 包含了一个定义其选项的配置对象。 +### Vue Test Utils 配置选项 + ### `stubs` - 类型：`Object` diff --git a/docs/zh/api/options.md b/docs/zh/api/options.md index 2850f2bbf..a6b02c8aa 100644 --- a/docs/zh/api/options.md +++ b/docs/zh/api/options.md @@ -198,8 +198,6 @@ expect(wrapper.vm.$route).toBeInstanceOf(Object) - 类型：`boolean` - 默认值：`true` -将所有的侦听器都设置为同步执行。 - 当 `sync` 是 `true` 时，这个 Vue 组件会被同步渲染。 当 `sync` 是 `false` 时，这个 Vue 组件会被异步渲染。 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/README.md b/docs/zh/api/wrapper/README.md index 2bc8d77c7..3d02606d6 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` 则为真 -- **方法：** +#### `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 示例。** From 7a4f9f37eee8657c34ea734524071f35c1caa745 Mon Sep 17 00:00:00 2001 From: Jinjiang Date: Sun, 27 May 2018 00:45:18 +0800 Subject: [PATCH 2/2] [docs][zh] updated 1a4d12f...528d637 --- docs/zh/api/README.md | 2 +- docs/zh/api/config.md | 17 +++++++++++++- docs/zh/api/createLocalVue.md | 6 ++--- docs/zh/api/options.md | 14 ++++++------ docs/zh/api/selectors.md | 4 ++-- docs/zh/api/wrapper-array/at.md | 4 ++-- docs/zh/api/wrapper-array/contains.md | 4 ++-- docs/zh/api/wrapper-array/filter.md | 4 ++-- docs/zh/api/wrapper/README.md | 2 +- docs/zh/guides/common-tips.md | 6 ++--- docs/zh/guides/testing-SFCs-with-karma.md | 4 ++-- .../guides/testing-SFCs-with-mocha-webpack.md | 4 ++-- docs/zh/guides/testing-async-components.md | 12 +++++----- docs/zh/guides/using-with-vue-router.md | 16 +++++++------- docs/zh/guides/using-with-vuex.md | 22 +++++++++---------- 15 files changed, 68 insertions(+), 53 deletions(-) diff --git a/docs/zh/api/README.md b/docs/zh/api/README.md index 55017c3e6..11e368375 100644 --- a/docs/zh/api/README.md +++ b/docs/zh/api/README.md @@ -6,4 +6,4 @@ !!!include(docs/zh/api/renderToString.md)!!! !!!include(docs/zh/api/selectors.md)!!! !!!include(docs/zh/api/createLocalVue.md)!!! -!!!include(docs/zh/api/config.md)!!! \ No newline at end of file +!!!include(docs/zh/api/config.md)!!! diff --git a/docs/zh/api/config.md b/docs/zh/api/config.md index 304c139fb..d890d92c4 100644 --- a/docs/zh/api/config.md +++ b/docs/zh/api/config.md @@ -15,7 +15,7 @@ Vue Test Utils 包含了一个定义其选项的配置对象。 存储在 `config.stubs` 中的存根会被默认使用。 用到的组件存根。它们会被传入挂载选项的 `stubs` 覆写。 -当把 `stubs` 作为一个数组传入挂载选项时，`config.stubs` 会被转换为一个数组，然后用只返回一个 `` 的基础组件进行存根。 +当把 `stubs` 作为一个数组传入挂载选项时，`config.stubs` 会被转换为一个数组，然后用只返回一个 `<${component name}-stub>` 的基础组件进行存根。 示例： @@ -79,3 +79,18 @@ VueTestUtils.config.provide['$logger'] = { } } ``` + +### `logModifiedComponents` + +- 类型：`Boolean` +- 默认值：`true` + +当被展开的子元素被自动化存根的时候记录下告警日志。设置为 `false` 时则会隐藏告警日志。和其它配置选项不同的是，它不能设置在挂载选项上。 + +示例： + +```js +import VueTestUtils from '@vue/test-utils' + +VueTestUtils.config.logModifiedComponents = false +``` diff --git a/docs/zh/api/createLocalVue.md b/docs/zh/api/createLocalVue.md index 489ca92da..e1544bba4 100644 --- a/docs/zh/api/createLocalVue.md +++ b/docs/zh/api/createLocalVue.md @@ -10,17 +10,17 @@ 可通过 `options.localVue` 来使用： ```js -import { createLocalVue, shallow } from '@vue/test-utils' +import { createLocalVue, shallowMount } from '@vue/test-utils' import Foo from './Foo.vue' const localVue = createLocalVue() -const wrapper = shallow(Foo, { +const wrapper = shallowMount(Foo, { localVue, mocks: { foo: true } }) expect(wrapper.vm.foo).toBe(true) -const freshWrapper = shallow(Foo) +const freshWrapper = shallowMount(Foo) expect(freshWrapper.vm.foo).toBe(false) ``` diff --git a/docs/zh/api/options.md b/docs/zh/api/options.md index a6b02c8aa..a188102a2 100644 --- a/docs/zh/api/options.md +++ b/docs/zh/api/options.md @@ -1,6 +1,6 @@ # 挂载选项 -即 `mount` 和 `shallow` 的选项。该对象同时包含了 Vue Test Utils 挂载选项和其它选项。 +即 `mount` 和 `shallowMount` 的选项。该对象同时包含了 Vue Test Utils 挂载选项和其它选项。 - [`context`](#context) - [`slots`](#slots) @@ -48,7 +48,7 @@ expect(wrapper.is(Component)).toBe(true) import Foo from './Foo.vue' import Bar from './Bar.vue' -const wrapper = shallow(Component, { +const wrapper = shallowMount(Component, { slots: { default: [Foo, Bar], fooBar: Foo, // 将会匹配 ``。 @@ -86,7 +86,7 @@ There are three limitations. 示例： ```js -const wrapper = shallow(Component, { +const wrapper = shallowMount(Component, { scopedSlots: { foo: '

{{props.index}},{{props.text}}

' } @@ -98,7 +98,7 @@ expect(wrapper.find('#fooWrapper').html()).toBe('

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 } @@ -203,7 +203,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/api/wrapper/README.md b/docs/zh/api/wrapper/README.md index 3d02606d6..33ba40780 100644 --- a/docs/zh/api/wrapper/README.md +++ b/docs/zh/api/wrapper/README.md @@ -18,7 +18,7 @@ Vue Test Utils 是一个基于包裹器的 API。 #### `options.attachedToDom` -`Boolean`：如果 `attachToDom` 传递给了 `mount` 或 `shallow` 则为真 +`Boolean`：如果 `attachToDom` 传递给了 `mount` 或 `shallowMount` 则为真 #### `options.sync` 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()) })