update demo projects

Author: lmiller1990

README.md

@@ -6,7 +6,7 @@ Welcome to the Vue Testing Handbook!
 
 ## What is this?
 
-This is a collection of short, focused examples on how to test Vue components. It uses [`vue-test-utils`](https://github.com/vuejs/vue-test-utils), the official library for testing Vue components, and [Jest](https://jestjs.io/), a modern testing framework. It covers the `vue-test-utils` API, as well as best practises and useful parts of the Jest API for testing Vue components. A working demo project with the examples is also included, which you can pull down and run yourself.
+This is a collection of short, focused examples on how to test Vue components. It uses [`vue-test-utils`](https://github.com/vuejs/vue-test-utils), the official library for testing Vue components, and [Jest](https://jestjs.io/), a modern testing framework. It covers the `vue-test-utils` API, as well as best practices and useful parts of the Jest API for testing Vue components. A working demo project with the examples is also included, which you can pull down and run yourself.
 
 ## Languages
 

demo-app/package.json

@@ -11,17 +11,18 @@
     "@vue/composition-api": "^0.3.2",
     "axios": "^0.19.0",
     "flush-promises": "^1.0.0",
-    "vue": "^2.6.10",
+    "vue": "^2.6.11",
     "vue-router": "^3.1.3"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.3",
     "@vue/cli-plugin-babel": "^4.0.4",
     "@vue/cli-plugin-unit-jest": "^4.0.4",
     "@vue/cli-service": "^4.0.4",
-    "@vue/test-utils": "^1.0.0-beta.32",
+    "@vue/test-utils": "^1.0.4",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "^24.9.0",
-    "vue-template-compiler": "^2.5.16",
+    "vue-template-compiler": "^2.6.11",
     "vuex": "^3.1.1"
   },
   "browserslist": [

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

@@ -23,6 +23,6 @@ describe("App", () => {
     router.push("/nested-route")
     await wrapper.vm.$nextTick()
 
-    expect(wrapper.find(NestedRoute).exists()).toBe(true)
+    expect(wrapper.findComponent(NestedRoute).exists()).toBe(true)
   })
 })

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

@@ -1,4 +1,5 @@
 import { mount } from "@vue/test-utils"
+import '@testing-library/jest-dom'
 import Parent from "@/components/Parent.vue"
 import ParentWithManyChildren from "@/components/ParentWithManyChildren.vue"
 import Child from "@/components/Child.vue"
@@ -7,7 +8,7 @@ describe("Parent", () => {
   it("does not render a span", () => {
     const wrapper = mount(Parent)
 
-    expect(wrapper.find("span").isVisible()).toBe(false)
+    expect(wrapper.find("span").element).not.toBeVisible()
   })
 
   it("does render a span", () => {
@@ -17,13 +18,13 @@ describe("Parent", () => {
       }
     })
 
-    expect(wrapper.find("span").isVisible()).toBe(true)
+    expect(wrapper.find("span").element).toBeVisible()
   })
 
   it("does not render a Child component", () => {
     const wrapper = mount(Parent)
 
-    expect(wrapper.find(Child).exists()).toBe(false)
+    expect(wrapper.findComponent(Child).exists()).toBe(false)
   })
 
   it("renders a Child component", () => {
@@ -33,14 +34,14 @@ describe("Parent", () => {
       }
     })
 
-    expect(wrapper.find({ name: "Child" }).exists()).toBe(true)
+    expect(wrapper.findComponent({ name: "Child" }).exists()).toBe(true)
   })
 })
 
 describe("ParentWithManyChildren", () => {
   it("renders many children", () => {
     const wrapper = mount(ParentWithManyChildren)
 
-    expect(wrapper.findAll(Child).length).toBe(3)
+    expect(wrapper.findAllComponents(Child).length).toBe(3)
   })
 })

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

@@ -10,12 +10,12 @@ describe('ParentWithAPICallChild.vue', () => {
       }
     })
 
-    expect(wrapper.find(ComponentWithAsyncCall).exists()).toBe(true)
+    expect(wrapper.findComponent(ComponentWithAsyncCall).exists()).toBe(true)
   })
 
   it('renders with shallowMount and does not initialize API call', () => {
     const wrapper = shallowMount(ParentWithAPICallChild)
 
-    expect(wrapper.find(ComponentWithAsyncCall).exists()).toBe(true)
+    expect(wrapper.findComponent(ComponentWithAsyncCall).exists()).toBe(true)
   })
 })