Начало работы с тестированием приложений Vue 3

Поскольку приложения становятся более сложными, чем когда-либо, важно тестировать их автоматически. Мы можем сделать это с помощью модульных тестов, и тогда нам не придется все тестировать вручную.

В этой статье мы рассмотрим, как тестировать приложения Vue 3, написав простое приложение и протестировав его.

Начало работы с тестированием

Мы можем начать тестирование, создав проект с помощью Vue CLI.

Мы добавляем опцию «модульное тестирование» при создании проекта.

Затем будут добавлены файлы и настройки для создания и запуска модульных тестов.

Мы должны увидеть папку tests с тестовыми файлами.

Теперь мы можем создать наш собственный тест, написав:

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')
})

Затем мы можем запустить npm run test:unit, чтобы запустить тест.

Мы должны увидеть галочку, поскольку «Hello World» отображается как опора.

Мы вызываем mount, чтобы установить MessageComponent.

И у props есть реквизит.

Затем мы вызываем wrapper.text, чтобы получить текст визуализированного компонента.

test принимает строку с описанием теста, а обратный вызов имеет тестовый код.

Условный рендеринг

Мы можем протестировать условный рендеринг, как в первом примере.

Например, мы можем написать:

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')
})

У нас есть компонент Nav, и мы получаем элемент с идентификатором profile и wrapper.get.

Затем получаем текст методом text.

Мы можем проверить, существует ли элемент с данным селектором, с помощью:

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() пытается найти элемент с заданным селектором.

Кроме того, мы можем передать наши собственные данные, чтобы изменить значение реактивного свойства admin и протестировать его:

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')
})

Мы передаем нашу собственную data функцию в тест, поэтому мы устанавливаем admin на true.

А теперь мы можем проверить, отображается ли текст Admin вместе со ссылкой.

Заключение

Мы можем протестировать визуализированные компоненты Vue 3 с помощью Vue Test Utils.