Finding Elements and Components

Search for elements

vue-test-utils provides a way to find and confirm the presence of html elements or other Vue components using the find method. The use of find is to confirm that a component is rendered exactly an element or a subcomponent.

The source code for the tests described on this page can be found here .

Create components

In this example, we will create the <Child> and <Parent> .

Child:

Parent:

find with querySelector syntax

Conventional elements can easily be selected using the syntax of document.querySelector . vue-test-utils also provides an isVisible method to test v-show conditionally rendered elements. Create a Parent.spec.js , and inside the file we add the following code:

Because v-show="showSpan" defaults to false , we expect that the <span> of the element found isVisible will return false . The test will pass when running with yarn test:unit . Next, another test will be performed around showSpan case showSpan is true.

Of course will pass! Like isVisible for v-show , vue-test-utils provides an exists method which is used when checking render elements with v-if .

Find components with name and Component

Finding child components is a bit different than finding regular HTML elements. There will be two main ways to confirm the presence of child components:

1. find(Component)
2. find({ name: "ComponentName" })

A little easier to understand in the context of a test example. We will start with the find(Component) syntax. This requires that we import components and pass it to the find function.

The implementation of find is complex, as it works with querySelector , as well as some other syntax. You can see part of the source that finds the Vue child components described here . Basically, it checks the component’s name for each rendered child, then checks the constructor and some other properties.

As mentioned in the previous paragraph, the name attribute is one of the checks that are find when you run through a component. Instead of transferring components, you can simply pass an object with the exact name attribute. This means you do not need to import components. Let’s check the case when <Child> is rendered:

It kicked the pass! Using the name property may be a bit less intuitive, so entering the actual component is an alternative. Another option is to simply add a class or id and query using the querySelector shown in the first two examples.

findAll

There are often cases when you want to assert that some elements are rendered. Some common cases are a list of items that are redner with v-for . This is one of <ParentWithManyChildren> that renders the <Child> components.

We can write test tests by findAll confirming that the three <Child> components will be rendered like this:

Running yarn test:unit will display the passed test. You can use the querySelector syntax with findAll .

Conclude

This page includes:

• Use find and findAll with the querySelector syntax
• isVisible and exists
• Use find and findAll with the component or name of the selected part

The source code for the test described on this page can be found here .