Add mocks guide (#28)

* Add mocks guide

* Lint

Author: lmiller1990

demo-app/jest.config.js

@@ -18,5 +18,6 @@ module.exports = {
   ],
   testMatch: [
     '<rootDir>/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
-  ]
+  ],
+  setupFiles: ["<rootDir>/jest.init.js"]
 }

demo-app/jest.init.js

@@ -0,0 +1,6 @@
+import VueTestUtils from "@vue/test-utils"
+import translations from "./src/translations.js"
+
+const locale = "en"
+
+VueTestUtils.config.mocks["$t"] = (msg) => translations[locale][msg]

demo-app/src/components/Bilingual.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="hello">
+    {{ $t("helloWorld") }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Bilingual"
+}
+</script>

demo-app/src/translations.js

@@ -0,0 +1,8 @@
+export default {
+  "en": {
+    helloWorld: "Hello world!"
+  },
+  "ja": {
+    helloWorld: "こんにちは、世界！"
+  }
+}

demo-app/tests/unit/Bilingual.spec.js

@@ -0,0 +1,10 @@
+import { shallowMount } from "@vue/test-utils"
+import Bilingual from "@/components/Bilingual.vue"
+
+describe("Bilingual", () => {
+  it("renders successfully", () => {
+    const wrapper = shallowMount(Bilingual)
+
+    expect(wrapper.find(".hello").text()).not.toBe("")
+  })
+})

src/mocking-global-objects.md

@@ -1,7 +1,134 @@
 ### Mocking global objects
 
-ideas:
+`vue-test-utils` provides a simple way to global objects attached to `Vue.prototype`, both on test by test basis and to set a default mock for all tests.
 
-- $store
-- $router
-- $t (vue i18n)
+The test used in the following example can be found [here](https://github.com/lmiller1990/vue-testing-handbook/blob/master/demo-app/tests/unit/Bilingual.spec.js).
+
+## The mocks mounting option
+
+The [mocks mounting optino](https://vue-test-utils.vuejs.org/api/options.html#mocks) is one way to set the value of any properties attached to `Vue.prototype`. This commonlly includes:
+
+- `$store`, for Vuex
+- `$router`, for Vue Router
+- `$t`, for vue-i18n
+
+any many others.
+
+## Example with vue-i18n
+
+Use with Vuex and Vue Router are discussed in the respective sections. Let's see an example with [vue-i18n](https://github.com/kazupon/vue-i18n). While it would be possible to use `createLocalVue` and install `vue-i18n` for each test, that would quickly get cumbersome and introduce boilerplate. First, a `<Bilingual>` component that uses `vue-i18n`:
+
+```html
+<template>
+  <div class="hello">
+    {{ $t("helloWorld") }}
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "Bilingual"
+  }
+</script>
+```
+
+The way `vue-i18n` works is you declare you translation in another file, then reference them with `$t`. For the purpose of this test it doesn't really matter, but for this component the translation file would be like this:
+
+```js
+export default {
+  "en": {
+    helloWorld: "Hello world!"
+  },
+  "ja": {
+    helloWorld: "こんにちは、世界！"
+  }
+}
+```
+
+Basic on the locale, the correct translation is rendered. Let's try and render the component in a test:
+
+```js
+import { shallowMount } from "@vue/test-utils"
+import Bilingual from "@/components/Bilingual.vue"
+
+describe("Bilingual", () => {
+  it("renders successfully", () => {
+    const wrapper = shallowMount(Bilingual)
+  })
+})
+```
+
+Running this test with `yarn test:unit` throw huge stack trace. If you look through, you can see:
+
+```
+[Vue warn]: Error in config.errorHandler: "TypeError: _vm.$t is not a function"
+```
+
+This is because we did not install `vue-i18n`, so the global `$t` method does not exist. Let's mock it using the `mocks` mounting option:
+
+```js
+import { shallowMount } from "@vue/test-utils"
+import Bilingual from "@/components/Bilingual.vue"
+
+describe("Bilingual", () => {
+  it("renders successfully", () => {
+    const wrapper = shallowMount(Bilingual, {
+      mocks: {
+        $t: (msg) => msg
+      }
+    })
+  })
+})
+```
+
+Now the test passes! There are lots of uses for the `mocks` option. Most frequently I find myself mocking the three packages mentioned above.
+
+## Settings default mocks using config
+
+Soemtimes you want to have a default value for the mock, so you don't have to type it for every test. You can do this using the [config](https://vue-test-utils.vuejs.org/api/#vue-test-utils-config-options) provided by `vue-test-utils`. Let's expand the `vue-i18n` example. You can set default mocks anywhere by doing the following:
+
+```js
+import VueTestUtils from "@vue/test-utils"
+
+VueTestUtils.config.mocks["mock"] = "Default Mock Value"
+```
+
+The demo project for this guide is using Jest, so I will declare the default mock in `jest.init.js`, which is loaded before the tests are run automatically. I will also import the translations object declared above, and use it in the mock implementation.
+
+```js
+import VueTestUtils from "@vue/test-utils"
+import translations from "./src/translations.js"
+
+const locale = "en"
+
+VueTestUtils.config.mocks["$t"] = (msg) => translations[locale][msg]
+```
+
+Now a real translation will be rendered, even using the mocked `$t` function. Run the test again, this time using `console.log` on `wrapper.html()` and removing the `mocks` mounting option:
+
+```js
+describe("Bilingual", () => {
+  it("renders successfully", () => {
+    const wrapper = shallowMount(Bilingual)
+
+    console.log(wrapper.html())
+  })
+})
+```
+
+The test passes, and the following markup is rendered:
+
+```
+<div class="hello">
+  Hello world!
+</div>
+```
+
+You can read about using `mocks` to test Vuex [here](https://lmiller1990.github.io/vue-testing-handbook/vuex-in-components.html#using-a-mock-store). The technique is the same.
+
+## Conclusion
+
+This guide discussed:
+
+- using `mocks` to mock a global object on a test by test basis
+- using `config.mocks` to set a default mock