add note on findComponent (#187)

Author: bikingbadger

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

@@ -1,21 +1,23 @@
-import { shallowMount, mount } from '@vue/test-utils'
-import ParentWithAPICallChild from '../../src/components/ParentWithAPICallChild.vue'
-import ComponentWithAsyncCall from '../../src/components/ComponentWithAsyncCall.vue'
+import { shallowMount, mount } from '@vue/test-utils';
+import ParentWithAPICallChild from '../../src/components/ParentWithAPICallChild.vue';
+import ComponentWithAsyncCall from '../../src/components/ComponentWithAsyncCall.vue';
 
 describe('ParentWithAPICallChild.vue', () => {
   it('renders with mount and does initialize API call', () => {
     const wrapper = mount(ParentWithAPICallChild, {
-      stubs: {
-        ComponentWithAsyncCall: true
-      }
-    })
+      global: {
+        stubs: {
+          ComponentWithAsyncCall: true,
+        },
+      },
+    });
 
-    expect(wrapper.findComponent(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)
+    const wrapper = shallowMount(ParentWithAPICallChild);
 
-    expect(wrapper.findComponent(ComponentWithAsyncCall).exists()).toBe(true)
-  })
-})
+    expect(wrapper.findComponent(ComponentWithAsyncCall).exists()).toBe(true);
+  });
+});

src/v3/stubbing-components.md

@@ -83,7 +83,7 @@ export default {
 
 ## Write a test using `mount`
 
-Let's start off by writing a test to verify that `<ComponentWithAsyncCall>` is rendered:
+Let's start off by writing a test to verify that `<ComponentWithAsyncCall>` is rendered. Note  that `findComponent` is used. `find` is used for querying DOM elements, and uses the `querySelector` syntax. `findComponent` is used when looking for a specific component, a takes a component as the argument.
 
 ```js
 import { shallowMount, mount } from '@vue/test-utils'
@@ -94,7 +94,7 @@ describe('ParentWithAPICallChild.vue', () => {
   it('renders with mount and does initialize API call', () => {
     const wrapper = mount(ParentWithAPICallChild)
 
-    expect(wrapper.find(ComponentWithAsyncCall).exists()).toBe(true)
+    expect(wrapper.findComponent(ComponentWithAsyncCall).exists()).toBe(true)
   })
 })
 ```
@@ -108,7 +108,7 @@ console.log src/components/ComponentWithAsyncCall.vue:17
   Making api call
 ```
 
-The test is passing - great! However, we can do better. Notice the `console.log` in the test output - this comes from the `makeApiCall` method. Ideally we don't want to make calls to external services in our unit tests, especially when it's from a component that is not the main focus of the current test. We can use the `stubs` mounting option, described in the `vue-test-utils` docs [here](https://vue-test-utils.vuejs.org/api/options.html#stubs).
+The test is passing - great! However, we can do better. Notice the `console.log` in the test output - this comes from the `makeApiCall` method. Ideally we don't want to make calls to external services in our unit tests, especially when it's from a component that is not the main focus of the current test. We can use the `stubs` mounting option, described in the `vue-test-utils` docs [here](https://next.vue-test-utils.vuejs.org/migration/#mocks-and-stubs-are-now-in-global).
 
 ## Using `stubs` to stub `<ComponentWithAsyncCall>`
 
@@ -117,9 +117,11 @@ Let's update the test, this time stubbing `<ComponentWithAsyncCall>`:
 ```js
 it('renders with mount and does initialize API call', () => {
   const wrapper = mount(ParentWithAPICallChild, {
-    stubs: {
-      ComponentWithAsyncCall: true
-    }
+    global: {
+      stubs: {
+        ComponentWithAsyncCall: true
+      },
+    },
   })
 
   expect(wrapper.find(ComponentWithAsyncCall).exists()).toBe(true)