Getting Started with Testing Vue 3 Apps

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

With apps getting more complex than ever, it’s important to test them automatically. We can do this with unit tests, and then we don’t have to test everything by hand.

In this article, we’ll look at how to test Vue 3 apps by writing a simple app and testing it.

Getting Started with Testing

We can get started with testing by creating the project with Vue CLI.

We add the ‘unit testing’ option when we create then project.

Then the files and settings for creating and running unit tests will be added.

We should see the tests folder with the test files.

Now we can create our own test by writing:

import { mount } from '@vue/test-utils'

const MessageComponent = {
  template: '<p>{{ msg }}</p>',
  props: ['msg'],
}

test('displays message', () => {
  const wrapper = mount(MessageComponent, {
    props: {
      msg: 'Hello world'
    }
  })
  expect(wrapper.text()).toContain('Hello world')
})

Then we can run npm run test:unit to run the test.

We should see a checkmark since ‘Hello World’ is rendered as the prop.

We call mount to mount the MessageComponent .

And the props has the props.

Then we call wrapper.text to get the text of the rendered component.

test takes a string that has the test description and the callback has the test code.

Conditional Rendering

We can test conditional rendering as we do in the first example.

For example, we can write:

import { mount } from '@vue/test-utils'

const Nav = {
  template: `
    <nav>
      <a id="profile" href="/profile">Profile</a>
      <a v-if="admin" id="admin" href="/admin">Admin</a>
    </nav>
  `,
  data() {
    return {
      admin: false
    }
  }
}

test('displays profile', () => {
  const wrapper = mount(Nav)
  const profileLink = wrapper.get('#profile')
  expect(profileLink.text()).toEqual('Profile')
})

We have the Nav component and get the element with the ID profile with wrapper.get .

Then we get the text with the text method.

We can check whether an element with the given selector exists with:

import { mount } from '@vue/test-utils'

const Nav = {
  template: `
    <nav>
      <a id="profile" href="/profile">Profile</a>
      <a v-if="admin" id="admin" href="/admin">Admin</a>
    </nav>
  `,
  data() {
    return {
      admin: false
    }
  }
}

test('displays profile', () => {
  const wrapper = mount(Nav)
  const profileLink = wrapper.get('#profile')
  expect(profileLink.text()).toEqual('Profile')
})

test('does not render an admin link', () => {
  const wrapper = mount(Nav)
  expect(wrapper.find('#admin').exists()).toBe(false)
})

wrapper.find(‘#admin’).exists() tries to find the element with the given selector.

Also, we can pass in our own data to change the value of the admin reactive property and test it:

import { mount } from '@vue/test-utils'

const Nav = {
  template: `
    <nav>
      <a id="profile" href="/profile">Profile</a>
      <a v-if="admin" id="admin" href="/admin">Admin</a>
    </nav>
  `,
  data() {
    return {
      admin: true
    }
  }
}

test('renders an admin link', () => {
  const wrapper = mount(Nav, {
    data() {
      return {
        admin: true
      }
    }
  })
  expect(wrapper.get('#admin').text()).toEqual('Admin')
})

We pass in our own data function in the test so we set admin to true .

And now we can check that the Admin text is rendered along with the link.

Conclusion

We can test rendered Vue 3 components with Vue Test Utils.