docs: use localVue in using-with-vuex

Author: eddyerburgh

docs/en/guides/using-with-vuex.md

@@ -1,5 +1,7 @@
 # Using with Vuex
 
+In this guide, we'll see how to test Vuex in components with vue-test-utils.
+
 ## Mocking Actions
 
 Let’s look at some code.
@@ -35,29 +37,29 @@ 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 mount our component.
+To test this, we need to pass a mock store to Vue when we shallow 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 Vue from 'vue'
-import { mount } from 'vue-test-utils'
-import sinon from 'sinon'
-import { expect } from 'chai'
+import { shallow, createLocalVue } from 'vue-test-utils'
 import Vuex from 'vuex'
-import 'babel-polyfill'
 import Actions from '../../../src/components/Actions'
 
-Vue.use(Vuex)
+const localVue = createLocalVue()
+
+localVue.use(Vuex)
 
 describe('Actions.vue', () => {
   let actions
   let store
 
   beforeEach(() => {
     actions = {
-      actionClick: sinon.stub(),
-      actionInput: sinon.stub()
+      actionClick: jest.fn(),
+      actionInput: jest.fn()
     }
     store = new Vuex.Store({
       state: {},
@@ -66,25 +68,25 @@ describe('Actions.vue', () => {
   })
 
   it('calls store action actionInput when input value is input and an input even is fired', () => {
-    const wrapper = mount(Actions, { store })
+    const wrapper = shallow(Actions, { store, localVue })
     const input = wrapper.find('input')
     input.element.value = 'input'
     input.trigger('input')
-    expect(actions.actionInput.calledOnce).toBe(true)
+    expect(actions.actionInput).toHaveBeenCalled()
   })
 
   it('does not call store action actionInput when input value is not input and an input even is fired', () => {
-    const wrapper = mount(Actions, { store })
+    const wrapper = shallow(Actions, { store, localVue })
     const input = wrapper.find('input')
     input.element.value = 'not input'
     input.trigger('input')
-    expect(actions.actionInput.calledOnce).toBe(false)
+    expect(actions.actionInput).not.toHaveBeenCalled()
   })
 
   it('calls store action actionClick when button is clicked', () => {
-    const wrapper = mount(Actions, { store })
+    const wrapper = shallow(Actions, { store, localVue })
     wrapper.find('button').trigger('click')
-    expect(actions.actionClick.calledOnce).toBe(true)
+    expect(actions.actionClick).toHaveBeenCalled()
   })
 })
 ```
@@ -93,13 +95,13 @@ What’s happening here? First we tell Vue to use Vuex with the Vue.use method.
 
 We then make a mock store by calling new Vuex.store with our mock values. We only pass it the actions, since that’s all we care about.
 
-The actions are [sinon stubs](http://sinonjs.org/). The stubs give us methods to assert whether the actions were called or not.
+The actions are [jest mock functions](https://facebook.github.io/jest/docs/en/mock-functions.html). These mock functions give us methods to assert whether the actions were called or not.
 
 We can then assert in our tests that the action stub was called when expected.
 
 Now the way we define the store might look a bit foreign to you.
 
-We’re using beforeEach to ensure we have a clean store before each test. beforeEach is a mocha hook that’s called before each test. In our test, we are reassigning the store variables value. If we didn’t do this, the sinon stubs would need to be automatically reset. It also lets us change the state in our tests, without it affecting later tests.
+We’re using beforeEach to ensure we have a clean store before each test. beforeEach is a mocha hook that’s called before each test. In our test, we are reassigning the store variables value. If we didn’t do this, the mock functions would need to be automatically reset. It also lets us change the state in our tests, without it affecting later tests.
 
 The most important thing to note in this test is that **we create a mock Vuex store and then pass it to vue-test-utils**.
 
@@ -133,14 +135,13 @@ This is a fairly simple component. It renders the result of the getters clicks a
 Let’s see the test:
 
 ``` js
-import 'babel-polyfill'
-import Vue from 'vue'
-import { mount } from 'vue-test-utils'
-import { expect } from 'chai'
+import { shallow, createLocalVue } from 'vue-test-utils'
 import Vuex from 'vuex'
 import Actions from '../../../src/components/Getters'
 
-Vue.use(Vuex)
+const localVue = createLocalVue()
+
+localVue.use(Vuex)
 
 describe('Getters.vue', () => {
   let getters
@@ -158,19 +159,19 @@ describe('Getters.vue', () => {
   })
 
   it('Renders state.inputValue in first p tag', () => {
-    const wrapper = mount(Actions, { store })
+    const wrapper = shallow(Actions, { store, localVue })
     const p = wrapper.find('p')
     expect(p.text()).toBe(getters.inputValue())
   })
 
   it('Renders state.clicks in second p tag', () => {
-    const wrapper = mount(Actions, { store })
+    const wrapper = shallow(Actions, { 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 mount, 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 shallow, 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?
 
@@ -209,16 +210,14 @@ Simple component that includes one action and one getter.
 And the test:
 
 ``` js
-import Vue from 'vue'
-import { mount } from 'vue-test-utils'
-import sinon from 'sinon'
-import { expect } from 'chai'
+import { shallow, createLocalVue } from 'vue-test-utils'
 import Vuex from 'vuex'
-import 'babel-polyfill'
 import Modules from '../../../src/components/Modules'
 import module from '../../../src/store/module'
 
-Vue.use(Vuex)
+const localVue = createLocalVue()
+
+localVue.use(Vuex)
 
 describe('Modules.vue', () => {
   let actions
@@ -233,7 +232,7 @@ describe('Modules.vue', () => {
     }
 
     actions = {
-      moduleActionClick: sinon.stub()
+      moduleActionClick: jest.fn()
     }
 
     store = new Vuex.Store({
@@ -244,18 +243,22 @@ describe('Modules.vue', () => {
   })
 
   it('calls store action moduleActionClick when button is clicked', () => {
-    const wrapper = mount(Modules, { store })
+    const wrapper = shallow(Modules, { store, localVue })
     const button = wrapper.find('button')
     button.trigger('click')
-    expect(actions.moduleActionClick.calledOnce).toBe(true)
+    expect(actions.moduleActionClick).toHaveBeenCalled()
   })
 
   it('Renders state.inputValue in first p tag', () => {
-    const wrapper = mount(Modules, { store })
+    const wrapper = shallow(Modules, { store, localVue })
     const p = wrapper.find('p')
     expect(p.text()).toBe(state.module.clicks.toString())
   })
 })
 ```
 
-To have a look at what the module file looks like, [check out the repo](https://github.com/eddyerburgh/mock-vuex-in-vue-unit-tests-tutorial).
+### Resources
+
+- [Example project for this guide](https://github.com/eddyerburgh/vue-test-utils-vuex-example)
+- [localVue](../api/options.md#localvue)
+- [createLocalVue](../api/createLocalVue.md)