From 4776aa4c3009d3e16c92ec551cc565a4c7841505 Mon Sep 17 00:00:00 2001
From: 38elements <38elements@users.noreply.github.com>
Date: Sun, 6 May 2018 14:24:52 +0900
Subject: [PATCH] Update README.md
---
docs/en/README.md | 2 +-
docs/en/SUMMARY.md | 2 +-
docs/en/api/README.md | 2 +-
docs/en/api/createLocalVue.md | 6 ++---
docs/en/api/options.md | 12 +++++-----
docs/en/api/selectors.md | 4 ++--
docs/en/api/{shallow.md => shallowMount.md} | 22 ++++++++---------
docs/en/api/wrapper-array/at.md | 4 ++--
docs/en/api/wrapper-array/contains.md | 4 ++--
docs/en/api/wrapper-array/filter.md | 4 ++--
docs/en/api/wrapper/README.md | 4 ++--
docs/en/guides/common-tips.md | 6 ++---
docs/en/guides/testing-SFCs-with-karma.md | 4 ++--
.../guides/testing-SFCs-with-mocha-webpack.md | 4 ++--
docs/en/guides/testing-async-components.md | 10 ++++----
docs/en/guides/using-with-vue-router.md | 16 ++++++-------
docs/en/guides/using-with-vuex.md | 24 +++++++++----------
docs/ja/README.md | 2 +-
docs/ja/SUMMARY.md | 2 +-
docs/ja/api/README.md | 2 +-
docs/ja/api/createLocalVue.md | 6 ++---
docs/ja/api/options.md | 12 +++++-----
docs/ja/api/selectors.md | 4 ++--
docs/ja/api/{shallow.md => shallowMount.md} | 22 ++++++++---------
docs/ja/api/wrapper-array/at.md | 4 ++--
docs/ja/api/wrapper-array/contains.md | 4 ++--
docs/ja/api/wrapper-array/filter.md | 4 ++--
docs/ja/api/wrapper/README.md | 4 ++--
docs/ja/guides/common-tips.md | 6 ++---
docs/ja/guides/testing-SFCs-with-karma.md | 4 ++--
.../guides/testing-SFCs-with-mocha-webpack.md | 4 ++--
docs/ja/guides/testing-async-components.md | 10 ++++----
docs/ja/guides/using-with-vue-router.md | 16 ++++++-------
docs/ja/guides/using-with-vuex.md | 22 ++++++++---------
34 files changed, 129 insertions(+), 129 deletions(-)
rename docs/en/api/{shallow.md => shallowMount.md} (80%)
rename docs/ja/api/{shallow.md => shallowMount.md} (81%)
diff --git a/docs/en/README.md b/docs/en/README.md
index 3ab665ced..69f82a5a5 100644
--- a/docs/en/README.md
+++ b/docs/en/README.md
@@ -17,7 +17,7 @@ Vue Test Utils is the official unit testing utility library for Vue.js.
* [Using with Vuex](guides/using-with-vuex.md)
* [API](api/README.md)
* [mount](api/mount.md)
- * [shallow](api/shallow.md)
+ * [shallowMount](api/shallowMount.md)
* [render](api/render.md)
* [renderToString](api/renderToString.md)
* [Mounting Options](api/options.md)
diff --git a/docs/en/SUMMARY.md b/docs/en/SUMMARY.md
index 99f0a09c9..7e07b03ec 100644
--- a/docs/en/SUMMARY.md
+++ b/docs/en/SUMMARY.md
@@ -13,7 +13,7 @@
* [Using with Vuex](guides/using-with-vuex.md)
* [API](api/README.md)
* [mount](api/mount.md)
- * [shallow](api/shallow.md)
+ * [shallowMount](api/shallowMount.md)
* [render](api/render.md)
* [renderToString](api/renderToString.md)
* [Mounting Options](api/options.md)
diff --git a/docs/en/api/README.md b/docs/en/api/README.md
index ed8fe907c..02e303836 100644
--- a/docs/en/api/README.md
+++ b/docs/en/api/README.md
@@ -1,7 +1,7 @@
# API
* [mount](./mount.md)
-* [shallow](./shallow.md)
+* [shallowMount](./shallowMount.md)
* [render](./render.md)
* [renderToString](./renderToString.md)
* [Mounting Options](./options.md)
diff --git a/docs/en/api/createLocalVue.md b/docs/en/api/createLocalVue.md
index dc3424c9e..ffbeb7afc 100644
--- a/docs/en/api/createLocalVue.md
+++ b/docs/en/api/createLocalVue.md
@@ -10,17 +10,17 @@
Use it with `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/en/api/options.md b/docs/en/api/options.md
index 9370fa8d8..54d3866b0 100644
--- a/docs/en/api/options.md
+++ b/docs/en/api/options.md
@@ -1,6 +1,6 @@
# Mounting Options
-Options for `mount` and `shallow`. The options object can contain both Vue Test Utils mounting options and other options.
+Options for `mount` and `shallowMount`. The options object can contain both Vue Test Utils mounting options and other options.
## Vue Test Utils Specific Mounting Options
@@ -50,7 +50,7 @@ Example:
import Foo from './Foo.vue'
import Bar from './Bar.vue'
-const wrapper = shallow(Component, {
+const wrapper = shallowMount(Component, {
slots: {
default: [Foo, Bar],
fooBar: Foo, // Will match ``.
@@ -87,7 +87,7 @@ You can use [Puppeteer](https://github.com/karma-runner/karma-chrome-launcher#he
Example:
```js
-const wrapper = shallow(Component, {
+const wrapper = shallowMount(Component, {
scopedSlots: {
foo: '{{props.index}},{{props.text}}
'
}
@@ -110,7 +110,7 @@ mount(Component, {
stubs: ['registered-component']
})
-shallow(Component, {
+shallowMount(Component, {
stubs: {
// stub with a specific implementation
'registered-component': Foo,
@@ -130,7 +130,7 @@ Example:
```js
const $route = { path: 'http://www.example-path.com' }
-const wrapper = shallow(Component, {
+const wrapper = shallowMount(Component, {
mocks: {
$route
}
@@ -206,7 +206,7 @@ When `sync` is `false`, the Vue component is rendered asynchronously.
## Other options
-When the options for `mount` and `shallow` contain the options other than the mounting options, the component options are overwritten with those using [extends](https://vuejs.org/v2/api/#extends).
+When the options for `mount` and `shallowMount` contain the options other than the mounting options, the component options are overwritten with those using [extends](https://vuejs.org/v2/api/#extends).
```js
const Component = {
diff --git a/docs/en/api/selectors.md b/docs/en/api/selectors.md
index d30305a7e..c1b368621 100644
--- a/docs/en/api/selectors.md
+++ b/docs/en/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/en/api/shallow.md b/docs/en/api/shallowMount.md
similarity index 80%
rename from docs/en/api/shallow.md
rename to docs/en/api/shallowMount.md
index 7272d697b..0958769d6 100644
--- a/docs/en/api/shallow.md
+++ b/docs/en/api/shallowMount.md
@@ -1,4 +1,4 @@
-# `shallow(component [, options])`
+# `shallowMount(component [, options])`
- **Arguments:**
@@ -27,12 +27,12 @@ Like [`mount`](mount.md), it creates a [`Wrapper`](wrapper/README.md) that conta
**Without options:**
```js
-import { shallow } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'
describe('Foo', () => {
it('renders a div', () => {
- const wrapper = shallow(Foo)
+ const wrapper = shallowMount(Foo)
expect(wrapper.contains('div')).toBe(true)
})
})
@@ -41,12 +41,12 @@ describe('Foo', () => {
**With Vue options:**
```js
-import { shallow } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'
describe('Foo', () => {
it('renders a div', () => {
- const wrapper = shallow(Foo, {
+ const wrapper = shallowMount(Foo, {
propsData: {
color: 'red'
}
@@ -59,12 +59,12 @@ describe('Foo', () => {
**Attach to DOM:**
```js
-import { shallow } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'
describe('Foo', () => {
it('renders a div', () => {
- const wrapper = shallow(Foo, {
+ const wrapper = shallowMount(Foo, {
attachToDocument: true
})
expect(wrapper.contains('div')).toBe(true)
@@ -75,14 +75,14 @@ describe('Foo', () => {
**Default and named slots:**
```js
-import { shallow } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'
import Bar from './Bar.vue'
import FooBar from './FooBar.vue'
describe('Foo', () => {
it('renders a div', () => {
- const wrapper = shallow(Foo, {
+ const wrapper = shallowMount(Foo, {
slots: {
default: [Bar, FooBar],
fooBar: FooBar, // Will match ,
@@ -97,13 +97,13 @@ describe('Foo', () => {
**Stubbing global properties:**
```js
-import { shallow } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'
describe('Foo', () => {
it('renders a div', () => {
const $route = { path: 'http://www.example-path.com' }
- const wrapper = shallow(Foo, {
+ const wrapper = shallowMount(Foo, {
mocks: {
$route
}
diff --git a/docs/en/api/wrapper-array/at.md b/docs/en/api/wrapper-array/at.md
index b4dfe308c..23b63ddf0 100644
--- a/docs/en/api/wrapper-array/at.md
+++ b/docs/en/api/wrapper-array/at.md
@@ -10,10 +10,10 @@ Returns `Wrapper` at `index` passed. Uses zero based numbering (i.e. first item
- **Example:**
```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/en/api/wrapper-array/contains.md b/docs/en/api/wrapper-array/contains.md
index 9c21c080b..6f7037546 100644
--- a/docs/en/api/wrapper-array/contains.md
+++ b/docs/en/api/wrapper-array/contains.md
@@ -12,11 +12,11 @@ Use any valid [selector](../selectors.md).
- **Example:**
```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/en/api/wrapper-array/filter.md b/docs/en/api/wrapper-array/filter.md
index 0a2a2f6d3..f2985f060 100644
--- a/docs/en/api/wrapper-array/filter.md
+++ b/docs/en/api/wrapper-array/filter.md
@@ -14,9 +14,9 @@ A new `WrapperArray` instance containing `Wrapper` instances that returns true f
- **Example:**
```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/en/api/wrapper/README.md b/docs/en/api/wrapper/README.md
index 5b0d2f12b..43a241fe1 100644
--- a/docs/en/api/wrapper/README.md
+++ b/docs/en/api/wrapper/README.md
@@ -8,8 +8,8 @@ A `Wrapper` is an object that contains a mounted component or vnode and methods
`vm` `Component`: this is the `Vue` instance. You can access all the [instance methods and properties of a vm](https://vuejs.org/v2/api/#Instance-Properties) with `wrapper.vm`. This only exists on Vue component wrappers
`element` `HTMLElement`: the root DOM node of the wrapper
-`options` `Object`: Object containing Vue Test Utils options passed to `mount` or `shallow`
-`options.attachedToDom` `Boolean`: True if `attachToDom` was passed to `mount` or `shallow`
+`options` `Object`: Object containing Vue Test Utils options passed to `mount` or `shallowMount`
+`options.attachedToDom` `Boolean`: True if `attachToDom` was passed to `mount` or `shallowMount`
- **Methods:**
diff --git a/docs/en/guides/common-tips.md b/docs/en/guides/common-tips.md
index 3ae75ed1b..cb518b2bb 100644
--- a/docs/en/guides/common-tips.md
+++ b/docs/en/guides/common-tips.md
@@ -18,12 +18,12 @@ In unit tests, we typically want to focus on the component being tested as an is
In addition, for components that contain many child components, the entire rendered tree can get really big. Repeatedly rendering all child components could slow down our tests.
-Vue Test Utils allows you to mount a component without rendering its child components (by stubbing them) with the `shallow` method:
+Vue Test Utils allows you to mount a component without rendering its child components (by stubbing them) with the `shallowMount` method:
```js
-import { shallow } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
-const wrapper = shallow(Component) // returns a Wrapper containing a mounted Component instance
+const wrapper = shallowMount(Component) // returns a Wrapper containing a mounted Component instance
wrapper.vm // the mounted Vue instance
```
diff --git a/docs/en/guides/testing-SFCs-with-karma.md b/docs/en/guides/testing-SFCs-with-karma.md
index 7c71405e2..84ec750f9 100644
--- a/docs/en/guides/testing-SFCs-with-karma.md
+++ b/docs/en/guides/testing-SFCs-with-karma.md
@@ -106,12 +106,12 @@ And create a test file named `test/Counter.spec.js` with the following code:
```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/en/guides/testing-SFCs-with-mocha-webpack.md b/docs/en/guides/testing-SFCs-with-mocha-webpack.md
index d58bae144..da81bad3a 100644
--- a/docs/en/guides/testing-SFCs-with-mocha-webpack.md
+++ b/docs/en/guides/testing-SFCs-with-mocha-webpack.md
@@ -150,12 +150,12 @@ export default {
And create a test file named `test/Counter.spec.js` with the following code:
```js
-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()).toMatch('1')
})
diff --git a/docs/en/guides/testing-async-components.md b/docs/en/guides/testing-async-components.md
index 3d307b52d..64116e638 100644
--- a/docs/en/guides/testing-async-components.md
+++ b/docs/en/guides/testing-async-components.md
@@ -44,13 +44,13 @@ The below component makes an API call when a button is clicked, then assigns the
A test can be written like this:
``` 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 @@ This test currently fails because the assertion is called before the promise in
``` 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 @@ Another solution is to use an `async` function and the npm package `flush-promis
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/en/guides/using-with-vue-router.md b/docs/en/guides/using-with-vue-router.md
index c2291f818..1b06c6a63 100644
--- a/docs/en/guides/using-with-vue-router.md
+++ b/docs/en/guides/using-with-vue-router.md
@@ -7,14 +7,14 @@ You should never install Vue Router on the Vue base constructor in tests. Instal
To avoid this, we can create a localVue, and install Vue Router on that.
```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 @@ When we run tests, we need to make these Vue Router components available to the
### Using stubs
```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, {
### Installing Vue Router with localVue
```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, {
Sometimes you want to test that a component does something with parameters from the `$route` and `$router` objects. To do that, you can pass custom mocks to the Vue instance.
```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/en/guides/using-with-vuex.md b/docs/en/guides/using-with-vuex.md
index a98d455bc..51b959026 100644
--- a/docs/en/guides/using-with-vuex.md
+++ b/docs/en/guides/using-with-vuex.md
@@ -39,14 +39,14 @@ export default{
For the purposes of this test, we don’t care what the actions do, or what the store looks like. We just need to know that these actions are being fired when they should, and that they are fired with the expected value.
-To test this, we need to pass a mock store to Vue when we shallow our component.
+To test this, we need to pass a mock store to Vue when we shallowMount our component.
Instead of passing the store to the base Vue constructor, we can pass it to a - [localVue](../api/options.md#localvue). A localVue is a scoped Vue constructor that we can make changes to without affecting the global Vue constructor.
Let’s see what this looks like:
``` 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'
@@ -70,7 +70,7 @@ describe('Actions.vue', () => {
})
it('calls store action "actionInput" when input value is "input" and an "input" event is fired', () => {
- const wrapper = shallow(Actions, { store, localVue })
+ const wrapper = shallowMount(Actions, { store, localVue })
const input = wrapper.find('input')
input.element.value = 'input'
input.trigger('input')
@@ -78,7 +78,7 @@ describe('Actions.vue', () => {
})
it('does not call store action "actionInput" when input value is not "input" and an "input" event is fired', () => {
- 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')
@@ -86,7 +86,7 @@ describe('Actions.vue', () => {
})
it('calls store action "actionClick" when button is clicked', () => {
- const wrapper = shallow(Actions, { store, localVue })
+ const wrapper = shallowMount(Actions, { store, localVue })
wrapper.find('button').trigger('click')
expect(actions.actionClick).toHaveBeenCalled()
})
@@ -137,7 +137,7 @@ This is a fairly simple component. It renders the result of the getters `clicks`
Let’s see the test:
``` 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'
@@ -161,20 +161,20 @@ describe('Getters.vue', () => {
})
it('Renders "state.inputValue" in first p tag', () => {
- const wrapper = shallow(Getters, { store, localVue })
+ const wrapper = shallowMount(Getters, { store, localVue })
const p = wrapper.find('p')
expect(p.text()).toBe(getters.inputValue())
})
it('Renders "state.clicks" in second p tag', () => {
- 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())
})
})
```
-This test is similar to our actions test. We create a mock store before each test, pass it as an option when we call `shallow`, and assert that the value returned by our mock getters is being rendered.
+This test is similar to our actions test. We create a mock store before each test, pass it as an option when we call `shallowMount`, and assert that the value returned by our mock getters is being rendered.
This is great, but what if we want to check our getters are returning the correct part of our state?
@@ -214,7 +214,7 @@ Simple component that includes one action and one getter.
And the test:
``` 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'
@@ -247,14 +247,14 @@ describe('Modules.vue', () => {
})
it('calls store action "moduleActionClick" when button is clicked', () => {
- 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('Renders "state.inputValue" in first p tag', () => {
- 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())
})
diff --git a/docs/ja/README.md b/docs/ja/README.md
index 6fc456240..e881ca5d1 100644
--- a/docs/ja/README.md
+++ b/docs/ja/README.md
@@ -15,7 +15,7 @@
* [Vuex と一緒に使う](guides/using-with-vuex.md)
* [API](api/README.md)
* [mount](api/mount.md)
- * [shallow](api/shallow.md)
+ * [shallowMount](api/shallowMount.md)
* [render](api/render.md)
* [renderToString](api/renderToString.md)
* [マウンティングオプション](api/options.md)
diff --git a/docs/ja/SUMMARY.md b/docs/ja/SUMMARY.md
index 2e33c7da8..33778ad6a 100644
--- a/docs/ja/SUMMARY.md
+++ b/docs/ja/SUMMARY.md
@@ -13,7 +13,7 @@
* [Vuex と一緒に使う](guides/using-with-vuex.md)
* [API](api/README.md)
* [mount](api/mount.md)
- * [shallow](api/shallow.md)
+ * [shallowMount](api/shallowMount.md)
* [render](api/render.md)
* [renderToString](api/renderToString.md)
* [マウンティングオプション](api/options.md)
diff --git a/docs/ja/api/README.md b/docs/ja/api/README.md
index 77cae4a51..45b73b9ce 100644
--- a/docs/ja/api/README.md
+++ b/docs/ja/api/README.md
@@ -1,7 +1,7 @@
# API
* [mount](./mount.md)
-* [shallow](./shallow.md)
+* [shallowMount](./shallowMount.md)
* [render](./render.md)
* [renderToString](./renderToString.md)
* [マウンティングオプション](./options.md)
diff --git a/docs/ja/api/createLocalVue.md b/docs/ja/api/createLocalVue.md
index b669bc069..28ad580c3 100644
--- a/docs/ja/api/createLocalVue.md
+++ b/docs/ja/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,
intercept: { 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/ja/api/options.md b/docs/ja/api/options.md
index 79d229931..2cbe1ec8e 100644
--- a/docs/ja/api/options.md
+++ b/docs/ja/api/options.md
@@ -1,6 +1,6 @@
# マウンティングオプション
-`mount` と `shallow` に対するオプション。オプションオブジェクトには、`vue-test-utils` のマウントオプションとその他のオプションを含めることができます。
+`mount` と `shallowMount` に対するオプション。オプションオブジェクトには、`vue-test-utils` のマウントオプションとその他のオプションを含めることができます。
## `vue-test-utils` の詳細なマウンティングオプション
@@ -46,7 +46,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, // Will match ,
@@ -80,7 +80,7 @@ PhantomJS をサポートしません。
例:
```js
-const wrapper = shallow(Component, {
+const wrapper = shallowMount(Component, {
scopedSlots: {
foo: '{{props.index}},{{props.text}}
'
}
@@ -103,7 +103,7 @@ mount(Component, {
stubs: ['registered-component']
})
-shallow(Component, {
+shallowMount(Component, {
stubs: {
// 特定の実装によるスタブ
'registered-component': Foo,
@@ -123,7 +123,7 @@ shallow(Component, {
```js
const $route = { path: 'http://www.example-path.com' }
-const wrapper = shallow(Component, {
+const wrapper = shallowMount(Component, {
mocks: {
$route
}
@@ -197,7 +197,7 @@ expect(wrapper.vm.$route).toBeInstanceOf(Object)
## その他のオプション
-`mount` と `shallow` にマウンティングオプション以外のオプションが渡されると、コンポーネントのオプションは [extends](https://vuejs.org/v2/api/#extends) を使ってマウンティングオプション以外のオプションに上書きされます。
+`mount` と `shallowMount` にマウンティングオプション以外のオプションが渡されると、コンポーネントのオプションは [extends](https://vuejs.org/v2/api/#extends) を使ってマウンティングオプション以外のオプションに上書きされます。
```js
const Component = {
diff --git a/docs/ja/api/selectors.md b/docs/ja/api/selectors.md
index 9bbecece3..274be49bd 100644
--- a/docs/ja/api/selectors.md
+++ b/docs/ja/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/ja/api/shallow.md b/docs/ja/api/shallowMount.md
similarity index 81%
rename from docs/ja/api/shallow.md
rename to docs/ja/api/shallowMount.md
index 3c89dabb7..883c1a5aa 100644
--- a/docs/ja/api/shallow.md
+++ b/docs/ja/api/shallowMount.md
@@ -1,4 +1,4 @@
-# shallow(component [, options])
+# shallowMount(component [, options])
- **引数:**
@@ -28,12 +28,12 @@
**オプションなし:**
```js
-import { shallow } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'
describe('Foo', () => {
it('renders a div', () => {
- const wrapper = shallow(Foo)
+ const wrapper = shallowMount(Foo)
expect(wrapper.contains('div')).toBe(true)
})
})
@@ -42,12 +42,12 @@ describe('Foo', () => {
**Vueオプションを使用:**
```js
-import { shallow } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'
describe('Foo', () => {
it('renders a div', () => {
- const wrapper = shallow(Foo, {
+ const wrapper = shallowMount(Foo, {
propsData: {
color: 'red'
}
@@ -60,12 +60,12 @@ describe('Foo', () => {
**DOMへのアタッチ:**
```js
-import { shallow } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'
describe('Foo', () => {
it('renders a div', () => {
- const wrapper = shallow(Foo, {
+ const wrapper = shallowMount(Foo, {
attachToDocument: true
})
expect(wrapper.contains('div')).toBe(true)
@@ -76,14 +76,14 @@ describe('Foo', () => {
**デフォルトおよび名前付きスロット:**
```js
-import { shallow } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'
import Bar from './Bar.vue'
import FooBar from './FooBar.vue'
describe('Foo', () => {
it('renders a div', () => {
- const wrapper = shallow(Foo, {
+ const wrapper = shallowMount(Foo, {
slots: {
default: [Bar, FooBar],
fooBar: FooBar, // と一致する,
@@ -98,13 +98,13 @@ describe('Foo', () => {
**グローバルプロパティのスタブ:**
```js
-import { shallow } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'
describe('Foo', () => {
it('renders a div', () => {
const $route = { path: 'http://www.example-path.com' }
- const wrapper = shallow(Foo, {
+ const wrapper = shallowMount(Foo, {
intercept: {
$route
}
diff --git a/docs/ja/api/wrapper-array/at.md b/docs/ja/api/wrapper-array/at.md
index da1a540ed..95c41ea25 100644
--- a/docs/ja/api/wrapper-array/at.md
+++ b/docs/ja/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/ja/api/wrapper-array/contains.md b/docs/ja/api/wrapper-array/contains.md
index 92d185204..c12beed52 100644
--- a/docs/ja/api/wrapper-array/contains.md
+++ b/docs/ja/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/ja/api/wrapper-array/filter.md b/docs/ja/api/wrapper-array/filter.md
index e9345cb6a..ae9f4842f 100644
--- a/docs/ja/api/wrapper-array/filter.md
+++ b/docs/ja/api/wrapper-array/filter.md
@@ -14,9 +14,9 @@ predicate 関数が true を返す `Wrapper` インスタンスを含む新し
- **例:**
```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/ja/api/wrapper/README.md b/docs/ja/api/wrapper/README.md
index 49754dc82..f6863514d 100644
--- a/docs/ja/api/wrapper/README.md
+++ b/docs/ja/api/wrapper/README.md
@@ -8,8 +8,8 @@ vue-test-utils はラッパベースの API です。
`vm` `Component`：これは vue のインスタンスです。`wrapper.vm` を使って [vm のプロパティとインスタンスメソッド](https://jp.vuejs.org/v2/api/#インスタンスプロパティ)にアクセスできます。これは、Vue コンポーネントラッパにのみ存在します。
`element` `HTMLElement`: ラッパのルート DOM
-`options` `Object`: `mount` または `shallow` に渡された vue-test-utils オプションを含むオブジェクト
-`options.attachedToDom` `Boolean`: `mount` か `shallow` に渡された場合は True です。
+`options` `Object`: `mount` または `shallowMount` に渡された vue-test-utils オプションを含むオブジェクト
+`options.attachedToDom` `Boolean`: `mount` か `shallowMount` に渡された場合は True です。
- **メソッド:**
diff --git a/docs/ja/guides/common-tips.md b/docs/ja/guides/common-tips.md
index b73e6a656..7bec18021 100644
--- a/docs/ja/guides/common-tips.md
+++ b/docs/ja/guides/common-tips.md
@@ -18,12 +18,12 @@ UI コンポーネントでは、コンポーネントの内部実装の詳細
さらに、多くの子コンポーネントを含むコンポーネントの場合、描画されたツリー全体が非常に大きくなる可能性があります。すべての子コンポーネントを繰り返し描画すると、テストが遅くなる可能性があります。
-`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) // Component インスタンスを含む Wrapper を返します。
+const wrapper = shallowMount(Component) // Component インスタンスを含む Wrapper を返します。
wrapper.vm // マウントされた Vue インスタンス
```
diff --git a/docs/ja/guides/testing-SFCs-with-karma.md b/docs/ja/guides/testing-SFCs-with-karma.md
index 4036ef969..fe4f7bb9f 100644
--- a/docs/ja/guides/testing-SFCs-with-karma.md
+++ b/docs/ja/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/ja/guides/testing-SFCs-with-mocha-webpack.md b/docs/ja/guides/testing-SFCs-with-mocha-webpack.md
index 8af647725..148fb28ed 100644
--- a/docs/ja/guides/testing-SFCs-with-mocha-webpack.md
+++ b/docs/ja/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('increments count when button is clicked', () => {
- const wrapper = shallow(Counter)
+ const wrapper = shallowMount(Counter)
wrapper.find('button').trigger('click')
expect(wrapper.find('div').text()).toMatch('1')
})
diff --git a/docs/ja/guides/testing-async-components.md b/docs/ja/guides/testing-async-components.md
index b6249056b..560ef921b 100644
--- a/docs/ja/guides/testing-async-components.md
+++ b/docs/ja/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', () => {
反映されたテストはこのようになります。
``` 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/ja/guides/using-with-vue-router.md b/docs/ja/guides/using-with-vue-router.md
index d2b99d3a4..70a35844c 100644
--- a/docs/ja/guides/using-with-vue-router.md
+++ b/docs/ja/guides/using-with-vue-router.md
@@ -7,14 +7,14 @@
これを回避するために、localeVue を作成し、その上に 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 @@ Vue Router をインストールする時、`router-link` と `router-view` コ
### スタブを使用する
```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/ja/guides/using-with-vuex.md b/docs/ja/guides/using-with-vuex.md
index caa9f9163..6793a627a 100644
--- a/docs/ja/guides/using-with-vuex.md
+++ b/docs/ja/guides/using-with-vuex.md
@@ -46,7 +46,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'
@@ -70,7 +70,7 @@ describe('Actions.vue', () => {
})
it('calls store action actionInput when input value is input and an input event is fired', () => {
- const wrapper = shallow(Actions, { store, localVue })
+ const wrapper = shallowMount(Actions, { store, localVue })
const input = wrapper.find('input')
input.element.value = 'input'
input.trigger('input')
@@ -78,7 +78,7 @@ describe('Actions.vue', () => {
})
it('does not call store action actionInput when input value is not input and an input event is fired', () => {
- 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')
@@ -86,7 +86,7 @@ describe('Actions.vue', () => {
})
it('calls store action actionClick when button is clicked', () => {
- const wrapper = shallow(Actions, { store, localVue })
+ const wrapper = shallowMount(Actions, { store, localVue })
wrapper.find('button').trigger('click')
expect(actions.actionClick).toHaveBeenCalled()
})
@@ -137,7 +137,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'
@@ -161,20 +161,20 @@ describe('Getters.vue', () => {
})
it('Renders state.inputValue in first p tag', () => {
- const wrapper = shallow(Getters, { store, localVue })
+ const wrapper = shallowMount(Getters, { store, localVue })
const p = wrapper.find('p')
expect(p.text()).toBe(getters.inputValue())
})
it('Renders state.clicks in second p tag', () => {
- 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())
})
})
```
-このテストはアクションのテストに似ています。各テストの前にモックストアを作成し、`shallow` を呼び出すときにオプションを渡し、そしてモックゲッタから返された値を描画されているのを検証します。
+このテストはアクションのテストに似ています。各テストの前にモックストアを作成し、`shallowMount` を呼び出すときにオプションを渡し、そしてモックゲッタから返された値を描画されているのを検証します。
これは素晴らしいですが、もしゲッタが状態の正しい部分を返しているのを確認したい場合はどうしますか？
@@ -214,7 +214,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'
@@ -247,14 +247,14 @@ describe('Modules.vue', () => {
})
it('calls store action moduleActionClick when button is clicked', () => {
- 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('Renders state.inputValue in first p tag', () => {
- 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())
})