dont use shallowMount because it sucks

lmiller1990 · lmiller1990 · commit 346862186fc1 · 2020-04-06T00:08:39.000+10:00
diff --git a/demo-app/tests/unit/Bilingual.spec.js b/demo-app/tests/unit/Bilingual.spec.js
@@ -1,9 +1,9 @@
-import { shallowMount } from "@vue/test-utils"
+import { mount } from "@vue/test-utils"
 import Bilingual from "@/components/Bilingual.vue"
 
 describe("Bilingual", () => {
   it("renders successfully", () => {
-    const wrapper = shallowMount(Bilingual)
+    const wrapper = mount(Bilingual)
 
     expect(wrapper.find(".hello").text()).not.toBe("")
   })
diff --git a/demo-app/tests/unit/ComponentWithButtons.spec.js b/demo-app/tests/unit/ComponentWithButtons.spec.js
@@ -1,5 +1,5 @@
 import Vuex from "vuex"
-import { createLocalVue, shallowMount } from "@vue/test-utils"
+import { createLocalVue, mount } from "@vue/test-utils"
 import ComponentWithButtons from "@/components/ComponentWithButtons.vue"
 
 const localVue = createLocalVue()
@@ -16,7 +16,7 @@ const store = new Vuex.Store({
 describe("ComponentWithButtons", () => {
 
   it("commits a mutation when a button is clicked", async () => {
-    const wrapper = shallowMount(ComponentWithButtons, {
+    const wrapper = mount(ComponentWithButtons, {
       store, localVue
     })
 
@@ -33,7 +33,7 @@ describe("ComponentWithButtons", () => {
     const store = new Vuex.Store()
     store.dispatch = jest.fn()
 
-    const wrapper = shallowMount(ComponentWithButtons, {
+    const wrapper = mount(ComponentWithButtons, {
       store, localVue
     })
 
@@ -49,7 +49,7 @@ describe("ComponentWithButtons", () => {
 
   it("dispatches an action when a button is clicked", async () => {
     const mockStore = { dispatch: jest.fn() }
-    const wrapper = shallowMount(ComponentWithButtons, {
+    const wrapper = mount(ComponentWithButtons, {
       mocks: {
         $store: mockStore 
       }
diff --git a/demo-app/tests/unit/ComponentWithVuex.spec.js b/demo-app/tests/unit/ComponentWithVuex.spec.js
@@ -1,5 +1,5 @@
 import Vuex from "vuex"
-import { shallowMount, createLocalVue } from "@vue/test-utils"
+import { mount, createLocalVue } from "@vue/test-utils"
 import ComponentWithVuex from "@/components/ComponentWithVuex.vue"
 import ComponentWithGetters from "@/components/ComponentWithGetters.vue"
 
@@ -20,13 +20,13 @@ const store = new Vuex.Store({
 
 describe("ComponentWithVuex", () => {
   it("renders a username using a real Vuex store", () => {
-    const wrapper = shallowMount(ComponentWithVuex, { store, localVue })
+    const wrapper = mount(ComponentWithVuex, { store, localVue })
 
     expect(wrapper.find(".username").text()).toBe("alice")
   })
 
   it("renders a username using a mock store", () => {
-    const wrapper = shallowMount(ComponentWithVuex, {
+    const wrapper = mount(ComponentWithVuex, {
       mocks: {
         $store: {
           state: { username: "alice" }
@@ -40,13 +40,13 @@ describe("ComponentWithVuex", () => {
 
 describe("ComponentWithGetters", () => {
   it("renders a username using a real Vuex getter", () => {
-    const wrapper = shallowMount(ComponentWithGetters, { store, localVue })
+    const wrapper = mount(ComponentWithGetters, { store, localVue })
 
     expect(wrapper.find(".fullname").text()).toBe("Alice Doe")
   })
 
   it("renders a username using computed mounting options", () => {
-    const wrapper = shallowMount(ComponentWithGetters, {
+    const wrapper = mount(ComponentWithGetters, {
       mocks: {
         $store: {
           getters: {
@@ -60,7 +60,7 @@ describe("ComponentWithGetters", () => {
   })
 
   it("renders a username using computed mounting options", () => {
-    const wrapper = shallowMount(ComponentWithGetters, {
+    const wrapper = mount(ComponentWithGetters, {
       computed: {
         fullname: () => "Alice Doe"
       }
diff --git a/demo-app/tests/unit/Emitter.spec.js b/demo-app/tests/unit/Emitter.spec.js
@@ -1,9 +1,9 @@
 import Emitter from "@/components/Emitter.vue"
-import { shallowMount } from "@vue/test-utils"
+import { mount } from "@vue/test-utils"
 
 describe("Emitter", () => {
   it("emits an event with two arguments", () => {
-    const wrapper = shallowMount(Emitter)
+    const wrapper = mount(Emitter)
 
     wrapper.vm.emitEvent()
 
diff --git a/demo-app/tests/unit/FormSubmitter.spec.js b/demo-app/tests/unit/FormSubmitter.spec.js
@@ -1,5 +1,5 @@
 import flushPromises from "flush-promises"
-import { shallowMount } from "@vue/test-utils"
+import { mount } from "@vue/test-utils"
 import FormSubmitter from "@/components/FormSubmitter.vue"
 
 let url = ''
@@ -17,7 +17,7 @@ const mockHttp = {
 
 describe("FormSubmitter", () => {
   it("reveals a notification when submitted", async () => {
-    const wrapper = shallowMount(FormSubmitter)
+    const wrapper = mount(FormSubmitter)
 
     wrapper.find("[data-username]").setValue("alice")
     wrapper.find("form").trigger("submit.prevent")
@@ -28,7 +28,7 @@ describe("FormSubmitter", () => {
   })
 
   it("reveals a notification when submitted", async () => {
-    const wrapper = shallowMount(FormSubmitter, {
+    const wrapper = mount(FormSubmitter, {
       data() {
         return {
           asyncTest: true
diff --git a/demo-app/tests/unit/NumberRenderer.spec.js b/demo-app/tests/unit/NumberRenderer.spec.js
@@ -1,9 +1,9 @@
-import { shallowMount } from "@vue/test-utils"
+import { mount } from "@vue/test-utils"
 import NumberRenderer from "@/components/NumberRenderer.vue"
 
 describe("NumberRenderer", () => {
   it("renders even numbers", () => {
-    const wrapper = shallowMount(NumberRenderer, {
+    const wrapper = mount(NumberRenderer, {
       propsData: {
         even: true
       }
diff --git a/demo-app/tests/unit/Parent.spec.js b/demo-app/tests/unit/Parent.spec.js
@@ -1,17 +1,17 @@
-import { shallowMount } from "@vue/test-utils"
+import { mount } from "@vue/test-utils"
 import Parent from "@/components/Parent.vue"
 import ParentWithManyChildren from "@/components/ParentWithManyChildren.vue"
 import Child from "@/components/Child.vue"
 
 describe("Parent", () => {
   it("does not render a span", () => {
-    const wrapper = shallowMount(Parent)
+    const wrapper = mount(Parent)
 
     expect(wrapper.find("span").isVisible()).toBe(false)
   })
 
   it("does render a span", () => {
-    const wrapper = shallowMount(Parent, {
+    const wrapper = mount(Parent, {
       data() {
         return { showSpan: true }
       }
@@ -21,13 +21,13 @@ describe("Parent", () => {
   })
 
   it("does not render a Child component", () => {
-    const wrapper = shallowMount(Parent)
+    const wrapper = mount(Parent)
 
     expect(wrapper.find(Child).exists()).toBe(false)
   })
 
   it("renders a Child component", () => {
-    const wrapper = shallowMount(Parent, {
+    const wrapper = mount(Parent, {
       data() {
         return { showChild: true }
       }
@@ -39,7 +39,7 @@ describe("Parent", () => {
 
 describe("ParentWithManyChildren", () => {
   it("renders many children", () => {
-    const wrapper = shallowMount(ParentWithManyChildren)
+    const wrapper = mount(ParentWithManyChildren)
 
     expect(wrapper.findAll(Child).length).toBe(3)
   })
diff --git a/src/components-with-props.md b/src/components-with-props.md
@@ -53,13 +53,13 @@ export default {
 We will make an assertion on the message in the case the user does not have admin privileges.
 
 ```js
-import { shallowMount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import SubmitButton from '@/components/SubmitButton.vue'
 
 describe('SubmitButton.vue', () => {
   it("displays a non authorized message", () => {
     const msg = "submit"
-    const wrapper = shallowMount(SubmitButton,{
+    const wrapper = mount(SubmitButton,{
       propsData: {
         msg: msg
       }
@@ -99,14 +99,14 @@ We can see the `msg` prop is processed and the resulting markup is correctly ren
 Let's make an assertion on the other possible state, when `isAdmin` is `true`:
 
 ```js
-import { shallowMount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import SubmitButton from '@/components/SubmitButton.vue'
 
 describe('SubmitButton.vue', () => {
   it('displays a admin privileges message', () => {
     const msg = "submit"
     const isAdmin = true
-    const wrapper = shallowMount(SubmitButton,{
+    const wrapper = mount(SubmitButton,{
       propsData: {
         msg,
         isAdmin
@@ -147,12 +147,12 @@ Let's refactor the tests adhering to the principle "Don't Repeat Yourself" (DRY)
 
 ## Refactor with a Factory Function
 
-In both tests we call `shallowMount` then pass a similar `propsData` object. We can refactor this using a factory function. A factory function is simply a function that returns an object - it _makes_ objects, thus the name "factory" function.
+In both tests we call `mount` then pass a similar `propsData` object. We can refactor this using a factory function. A factory function is simply a function that returns an object - it _makes_ objects, thus the name "factory" function.
 
 ```js
 const msg = "submit"
 const factory = (propsData) => {
-  return shallowMount(SubmitButton, {
+  return mount(SubmitButton, {
     propsData: {
       msg,
       ...propsData
@@ -161,7 +161,7 @@ const factory = (propsData) => {
 }
 ```
 
-The above is a function that will `shallowMount` a `SubmitButton` component. We can pass any props to change as the first argument to `factory`. Let's DRY up the test with the factory function.
+The above is a function that will `mount` a `SubmitButton` component. We can pass any props to change as the first argument to `factory`. Let's DRY up the test with the factory function.
 
 ```js
 describe("SubmitButton", () => {
diff --git a/src/composition-api.md b/src/composition-api.md
@@ -71,13 +71,13 @@ The two things we will need to test here are:
 Testing the message is correctly rendered is trivial. We just use `propsData` to set the value of the prop, as described [here](/components-with-props.html).
 
 ```js
-import { shallowMount } from "@vue/test-utils"
+import { mount } from "@vue/test-utils"
 
 import CompositionApi from "@/components/CompositionApi.vue"
 
 describe("CompositionApi", () => {
   it("renders a message", () => {
-    const wrapper = shallowMount(CompositionApi, {
+    const wrapper = mount(CompositionApi, {
       propsData: {
         message: "Testing the composition API"
       }
@@ -95,13 +95,13 @@ As expected, this is very simple - regardless of the way we are composing out co
 Writing a test to ensure clicking the button increments the `state.count` is equally simple. Notice the test is marked `async`; read more about why this is required in [Simulating User Input](simulating-user-input.html#writing-the-test).
 
 ```js
-import { shallowMount } from "@vue/test-utils"
+import { mount } from "@vue/test-utils"
 
 import CompositionApi from "@/components/CompositionApi.vue"
 
 describe("CompositionApi", () => {
   it("increments a count when button is clicked", async () => {
-    const wrapper = shallowMount(CompositionApi, {
+    const wrapper = mount(CompositionApi, {
       propsData: { message: '' }
     })
 
diff --git a/src/computed-properties.md b/src/computed-properties.md
@@ -15,12 +15,12 @@ The `<NumberRenderer>` component will receive an `even` prop, that is a boolean.
 The test:
 
 ```js
-import { shallowMount } from "@vue/test-utils"
+import { mount } from "@vue/test-utils"
 import NumberRenderer from "@/components/NumberRenderer.vue"
 
 describe("NumberRenderer", () => {
   it("renders even numbers", () => {
-    const wrapper = shallowMount(NumberRenderer, {
+    const wrapper = mount(NumberRenderer, {
       propsData: {
         even: true
       }
@@ -195,7 +195,7 @@ FAIL  tests/unit/NumberRenderer.spec.js
 
 So we need to use `call`, which lets us bind an alternative `this` object, in our case, one with a `even` property.
 
-## To `call` or to `shallowMount`?
+## To `call` or to `mount`?
 
 Both techniques presented are useful for testing computed properties. Call can be useful when:
 
@@ -206,5 +206,5 @@ Of course, you want to make sure the value is correctly rendered as well, so mak
 
 ## Conclusion
 
-- computed properties can be using `shallowMount` making assertions on the rendered markup
+- computed properties can be using `mount` making assertions on the rendered markup
 - complex computed properties can be independently tested by using `call`
diff --git a/src/finding-elements-and-components.md b/src/finding-elements-and-components.md
@@ -57,12 +57,12 @@ export default {
 Regular elements can easily be selected using the syntax used with `document.querySelector`. `vue-test-utils` also provides a `isVisible` method to check if elements conditionally rendered with `v-show` are visible. Create a `Parent.spec.js`, and inside add the following test:
 
 ```js
-import { mount, shallowMount } from "@vue/test-utils"
+import { mount } from "@vue/test-utils"
 import Parent from "@/components/Parent.vue"
 
 describe("Parent", () => {
   it("does not render a span", () => {
-    const wrapper = shallowMount(Parent)
+    const wrapper = mount(Parent)
 
     expect(wrapper.find("span").isVisible()).toBe(false)
   })
@@ -73,7 +73,7 @@ Since `v-show="showSpan"` defaults to `false`, we expect the found `<span>` elem
 
 ```js
 it("does render a span", () => {
-  const wrapper = shallowMount(Parent, {
+  const wrapper = mount(Parent, {
     data() {
       return { showSpan: true }
     }
@@ -98,7 +98,7 @@ These are a bit easier to understand in the context of an example test. Let's st
 import Child from "@/components/Child.vue"
 
 it("does not render a Child component", () => {
-  const wrapper = shallowMount(Parent)
+  const wrapper = mount(Parent)
 
   expect(wrapper.find(Child).exists()).toBe(false)
 })
@@ -110,7 +110,7 @@ As mentioned in the previous paragraph, the `name` property is one of the checks
 
 ```js
 it("renders a Child component", () => {
-  const wrapper = shallowMount(Parent, {
+  const wrapper = mount(Parent, {
     data() {
       return { showChild: true }
     }
@@ -148,7 +148,7 @@ We can write a test using `findAll` to assert three `<Child>` components are ren
 
 ```js
 it("renders many children", () => {
-  const wrapper = shallowMount(ParentWithManyChildren)
+  const wrapper = mount(ParentWithManyChildren)
 
   expect(wrapper.findAll(Child).length).toBe(3)
 })
diff --git a/src/mocking-global-objects.md b/src/mocking-global-objects.md
@@ -48,12 +48,12 @@ export default {
 Based on the locale, the correct translation is rendered. Let's try and render the component in a test, without any mocking.
 
 ```js
-import { shallowMount } from "@vue/test-utils"
+import { mount } from "@vue/test-utils"
 import Bilingual from "@/components/Bilingual.vue"
 
 describe("Bilingual", () => {
   it("renders successfully", () => {
-    const wrapper = shallowMount(Bilingual)
+    const wrapper = mount(Bilingual)
   })
 })
 ```
@@ -67,12 +67,12 @@ Running this test with `yarn test:unit` throws a huge stack trace. If you look t
 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 { mount } from "@vue/test-utils"
 import Bilingual from "@/components/Bilingual.vue"
 
 describe("Bilingual", () => {
   it("renders successfully", () => {
-    const wrapper = shallowMount(Bilingual, {
+    const wrapper = mount(Bilingual, {
       mocks: {
         $t: (msg) => msg
       }
@@ -109,7 +109,7 @@ Now a real translation will be rendered, despite using a mocked `$t` function. R
 ```js
 describe("Bilingual", () => {
   it("renders successfully", () => {
-    const wrapper = shallowMount(Bilingual)
+    const wrapper = mount(Bilingual)
 
     console.log(wrapper.html())
   })
diff --git a/src/testing-emitted-events.md b/src/testing-emitted-events.md
diff --git a/src/vuex-in-components-mutations-and-actions.md b/src/vuex-in-components-mutations-and-actions.md
diff --git a/src/vuex-in-components.md b/src/vuex-in-components.md
