Chapter 3 – Testing Vue.js Components with Jest

Chapter 3

Test Styles and Structure

So far, we've tested using Jest Snapshots ( In most cases, that's what we'll use, but sometimes we may want to assert something more specific.

Although you can access a Vue instance via cmp.vm (, you have a set of utilities at your disposal to make it easier. Let's see what we can do.

The Wrapper Object

Wrapper is the main object of vue-test-utils. It is the type returned by the mount, shallowMount, find, and findAll functions. You can see the whole API and typings here (

find and findAll

find and findAll accept a selector ( as an argument, which can be a CSS selector and a Vue component as well.

So, we can do things such as:

let cmp = mount(MessageList);


// Or even call it multiple times

let el = cmp.find(".message").find("span").element;

// Although for the previous example, we could do it in one

let el = cmp.find(".message span").element;

Asserting Structure and Style

Let's add more tests to MessageList.test.js:

it("is a MessageList component", () => {


  // Or with CSS selector



it("contains a Message component", () => {


  // Or with CSS selector



Here, we're using is to assert the root component type and contains to check for the existence of sub-components. Just like find, they receive a Selector, which can be a CSS selector or component.

We have some utils to assert the Vue instance:

it("Both MessageList and Message are vue instances", () => {




Now we're going to assert structure in more detail:

it("Message element exists", () => {



it("Message is not empty", () => {



it('Message has a class attribute set to "message"', () => {



The exists, isEmpty, and attributes methods come in handy for this.

Then, we have classes and attributes().style to assert styling. Let's update the Message.vue component with a style, since attributes().style asserts only inline styles:

<li style="margin-top: 10px" class="message">{{message}}</li>

Here are the tests:

it("Message component has the .message class", () => {



it("Message component has style padding-top: 10", () => {

  expect(cmp.find(Message).attributes().style).toBe("padding-top: 10px;");


There is a bunch of utils to make testing Vue components easier. You can find them all in the typings file (

You can find the working code of this chapter on GitHub (