docs: update README.md (#588)

Author: 38elements

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)

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)

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)

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)
 ```
 

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 `<slot name="FooBar" />`.
@@ -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: '<p slot-scope="props">{{props.index}},{{props.text}}</p>'
   }
@@ -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 = {

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)
 ```
 

docs/en/api/shallow.md renamed to 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 <slot name="FooBar" />,
@@ -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
       }

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)

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)

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'))
 ```

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:**
 

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
 ```
 

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')
   })

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')
   })

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')

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,23 +31,23 @@ 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']
 })
 ```
 
 ### 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
   }