From 9001caeb49e99863f6a5b0435dbf92bd148c9905 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 13:46:05 +0100
Subject: [PATCH 1/3] fix: update unit test code examples with Vue Test Utils

---
 src/v2/guide/unit-testing.md | 50 +++++++++++++++++++-----------------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/v2/guide/unit-testing.md b/src/v2/guide/unit-testing.md
index b3c8c9ff88..e2a16a7e4e 100644
--- a/src/v2/guide/unit-testing.md
+++ b/src/v2/guide/unit-testing.md
@@ -83,47 +83,49 @@ A component's render output is primarily determined by the props it receives. If
 </script>
 ```
 
-You can assert its render output with different props using the `propsData` option:
+You can assert its render output with different props using [Vue Test Utils](https://vue-test-utils.vuejs.org/):
 
 ``` js
-import Vue from 'vue'
+import { shallowMount } from '@vue/test-utils'
 import MyComponent from './MyComponent.vue'
 
-// helper function that mounts and returns the rendered text
-function getRenderedText (Component, propsData) {
-  const Constructor = Vue.extend(Component)
-  const vm = new Constructor({ propsData: propsData }).$mount()
-  return vm.$el.textContent
+// helper function that mounts and returns the rendered component
+function getMountedComponent(Component, propsData) {
+  return shallowMount(MyComponent, {
+    propsData
+  })
 }
 
 describe('MyComponent', () => {
   it('renders correctly with different props', () => {
-    expect(getRenderedText(MyComponent, {
-      msg: 'Hello'
-    })).toBe('Hello')
-
-    expect(getRenderedText(MyComponent, {
-      msg: 'Bye'
-    })).toBe('Bye')
+    expect(
+      getMountedComponent(MyComponent, {
+        msg: 'Hello'
+      }).text()
+    ).toBe('Hello')
+
+    expect(
+      getMountedComponent(MyComponent, {
+        msg: 'Bye'
+      }).text()
+    ).toBe('Bye')
   })
 })
 ```
 
 ## Asserting Asynchronous Updates
 
-Since Vue [performs DOM updates asynchronously](reactivity.html#Async-Update-Queue), assertions on DOM updates resulting from state change will have to be made in a `Vue.nextTick` callback:
+Since Vue [performs DOM updates asynchronously](reactivity.html#Async-Update-Queue), assertions on DOM updates resulting from state change will have to be made after `Vue.nextTick()` has resolved:
 
 ``` js
 // Inspect the generated HTML after a state update
-it('updates the rendered message when vm.message updates', done => {
-  const vm = new Vue(MyComponent).$mount()
-  vm.message = 'foo'
-
-  // wait a "tick" after state change before asserting DOM updates
-  Vue.nextTick(() => {
-    expect(vm.$el.textContent).toBe('foo')
-    done()
-  })
+it('updates the rendered message when vm.message updates', async () => {
+  const vm = shallowMount(MyComponent)
+  vm.setData({ message: 'foo' })
+
+  // Wait a "tick" after state change before asserting DOM updates
+  await Vue.nextTick()
+  expect(vm.text()).toBe('foo')
 })
 ```
 

From 0eea703af195d6d1463b6e6c785da8910483585b Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 14:04:21 +0100
Subject: [PATCH 2/3] fix: use vm. instead of Vue.nextTick to avoid importing
 Vue

---
 src/v2/guide/unit-testing.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/v2/guide/unit-testing.md b/src/v2/guide/unit-testing.md
index e2a16a7e4e..f2d4d1f9e2 100644
--- a/src/v2/guide/unit-testing.md
+++ b/src/v2/guide/unit-testing.md
@@ -119,13 +119,13 @@ Since Vue [performs DOM updates asynchronously](reactivity.html#Async-Update-Que
 
 ``` js
 // Inspect the generated HTML after a state update
-it('updates the rendered message when vm.message updates', async () => {
-  const vm = shallowMount(MyComponent)
-  vm.setData({ message: 'foo' })
+it('updates the rendered message when wrapper.message updates', async () => {
+  const wrapper = shallowMount(MyComponent)
+  wrapper.setData({ message: 'foo' })
 
   // Wait a "tick" after state change before asserting DOM updates
-  await Vue.nextTick()
-  expect(vm.text()).toBe('foo')
+  await wrapper.vm.$nextTick()
+  expect(wrapper.text()).toBe('foo')
 })
 ```
 

From b3c90f6268094641b07b4842d72aae6dfd5b5e3f Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 14:06:05 +0100
Subject: [PATCH 3/3] fix: change name in paragraph

---
 src/v2/guide/unit-testing.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/v2/guide/unit-testing.md b/src/v2/guide/unit-testing.md
index f2d4d1f9e2..d63f19a198 100644
--- a/src/v2/guide/unit-testing.md
+++ b/src/v2/guide/unit-testing.md
@@ -115,7 +115,7 @@ describe('MyComponent', () => {
 
 ## Asserting Asynchronous Updates
 
-Since Vue [performs DOM updates asynchronously](reactivity.html#Async-Update-Queue), assertions on DOM updates resulting from state change will have to be made after `Vue.nextTick()` has resolved:
+Since Vue [performs DOM updates asynchronously](reactivity.html#Async-Update-Queue), assertions on DOM updates resulting from state change will have to be made after `vm.$nextTick()` has resolved:
 
 ``` js
 // Inspect the generated HTML after a state update