Приступая к изучению

Добро пожаловать в Vue Test Utils, официальную библиотеку инструментов тестирования для Vue.js!

Эта документация для Vue Test Utils v2, которая предназначена для Vue 3.

Коротко:

• Vue Test Utils 1 предназначена для Vue 2.
• Vue Test Utils 2 предназначена для Vue 3.

Что такое Vue Test Utils?

Vue Test Utils (VTU) это набор вспомогательных функций, предназначенных для упрощения тестирование Vue.js компонентов. Библиотека предоставляет некоторые методы для добавления и взаимодействия с Vue компонентами в изоляции от других компонентов.

Давайте рассмотрим пример:

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

Vue Test Utils обычно используется с программами тестирования. Популярные программы тестирования:

• Vitest. На основе терминала, имеет экспериментальный браузерный интерфейс.
• Cypress. На основе браузера, поддерживает Vite, Webpack.
• Playwright (экспериментальный). На основе браузера, поддерживает Vite.
• WebdriverIO. На основе браузера, поддерживает Vite, Webpack, кросс-браузерную поддержку.

Vue Test Utils это небольшая библиотека. Для создания чего-то более функционального, предлагаем рассмотреть Cypress Component Testing которая имеет hot reload (быстрая перезагрузка), или Testing Library, которая делает акцент на селекторах при создании проверок. Оба инструмента используется Vue Test Utils под капотом и предоставляют те же самые API.

Что дальше?

Чтобы увидеть Vue Test Utils в действии, попробуйте ускоренный курс, где мы создали простое Todo приложение, используя подход "сначала тест, потом реализация".

Документация разделена на 2 главных раздела:

• Основы: покрывает основные случаи использования, с которыми вы столкнетесь, при тестировании Vue компонентов.
• Углубленно: исследует продвинутые возможности библиотеки.

Вы также можете изучить полную API.

В качестве альтернативы, если вы предпочитаете изучать по видео, тут есть плейлист с лекциями.