Getting Started with Testing Vue 3 Apps
Tags: vue, javascript, webdev, programming
Published: 2021-01-19 21:28:53

**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.