Тестирование Vue компонентов

Для тестирования компонентов Vue с использованием Cypress необходима корректная интеграция с Vue CLI или Vite. Cypress поддерживает два основных режима: End-to-End (E2E) и Component Testing. Для тестирования отдельных Vue-компонентов используется режим Component Testing, который позволяет запускать компоненты в изолированной среде браузера, имитируя поведение реального приложения.

  1. Установка Cypress и необходимых пакетов:
npm install cypress @cypress/vue @cypress/webpack-dev-server --save-dev

Для проектов на Vite вместо @cypress/webpack-dev-server используется @cypress/vite-dev-server.

  1. Инициализация конфигурации:
npx cypress open

При первом запуске создается структура проекта с папками cypress/e2e и cypress/support, а также конфигурационный файл cypress.config.js. Для Component Testing необходимо указать фреймворк:

import { defineConfig } from 'cypress'

export default defineConfig({
  component: {
    devServer: {
      framework: 'vue',
      bundler: 'vite'
    }
  }
})

Структура теста Vue-компонента

Тестирование Vue-компонентов строится по принципу модульного подхода. Основная структура файла теста:

import { mount } from '@cypress/vue'
import MyComponent from '../. ./src/components/MyComponent.vue'

describe('MyComponent', () => {
  it('отображает переданный пропс', () => {
    mount(MyComponent, {
      props: {
        title: 'Привет, Cypress!'
      }
    })

    cy.get('h1').should('contain.text', 'Привет, Cypress!')
  })
})

Ключевые моменты:

  • mount — функция из @cypress/vue, которая рендерит компонент в тестовом контейнере.
  • props — передача входных данных в компонент.
  • Методы Cypress (cy.get, cy.contains, cy.should) используются для проверки DOM.

Работа с событиями и пользовательскими действиями

Vue-компоненты часто взаимодействуют с пользователем через события (click, input, submit). Cypress позволяет симулировать эти действия напрямую.

it('обрабатывает клик по кнопке', () => {
  mount(MyComponent)

  cy.get('button').click()
  cy.get('.message').should('contain.text', 'Кнопка нажата')
})

Для ввода текста в input используется метод type:

cy.get('input[name="username"]').type('testuser')
cy.get('form').submit()
cy.get('.result').should('contain.text', 'testuser')

Моки и заглушки для API

Многие компоненты Vue зависят от внешних API. Cypress предоставляет возможности перехвата HTTP-запросов с помощью cy.intercept:

cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers')
mount(UserList)
cy.wait('@getUsers')
cy.get('.user').should('have.length', 3)

Особенности:

  • fixture позволяет использовать заранее подготовленные данные.
  • as присваивает алиас запросу для удобной синхронизации через cy.wait.

Тестирование реактивности и состояния

Vue активно использует реактивное состояние (ref, reactive, computed). Cypress поддерживает проверку изменений состояния через DOM:

mount(Counter)

cy.get('button.increment').click().click()
cy.get('.count').should('contain.text', '2')

Для сложных реактивных структур можно проверять как свойства компонентов, так и текстовые изменения в DOM.

Использование слотов и дочерних компонентов

Cypress позволяет рендерить компоненты с кастомными слотами, что особенно важно для тестирования составных UI-элементов:

mount(ParentComponent, {
  slots: {
    default: '<button class="slot-btn">Слот кнопка</button>'
  }
})

cy.get('.slot-btn').click()
cy.get('.slot-result').should('exist')

Для дочерних компонентов можно использовать stubs:

mount(ParentComponent, {
  global: {
    stubs: {
      ChildComponent: true
    }
  }
})

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

Настройка глобальных провайдеров и плагинов Vue

Компоненты Vue часто используют глобальные плагины (Vuex, Pinia, Vue Router). Cypress поддерживает их подключение через объект global при монтировании:

import { createPinia } from 'pinia'
mount(MyComponent, {
  global: {
    plugins: [createPinia()]
  }
})

Для Vue Router:

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({ history: createWebHistory(), routes: [] })
mount(MyComponent, {
  global: { plugins: [router] }
})

Отладка и интерактивная проверка

Cypress Component Testing предоставляет интерактивный режим, позволяющий наблюдать рендеринг компонента в реальном времени. Важно использовать команды:

  • cy.pause() — останавливает выполнение теста для инспекции.
  • cy.debug() — выводит текущий объект в консоль.

Для проверки визуального состояния можно использовать cy.screenshot() и плагины для визуального тестирования, например cypress-image-snapshot.

Практики написания качественных тестов

  • Каждый тест должен проверять одну конкретную функцию компонента.
  • Использовать моки и стабы для внешних зависимостей.
  • Минимизировать взаимодействие с глобальными состояниями для изоляции тестов.
  • Использовать селекторы по данным атрибутам (data-cy) вместо классов для стабильности тестов:
<button data-cy="submit-btn">Отправить</button>
cy.get('[data-cy=submit-btn]').click()
  • Проверять не только видимые изменения, но и корректность реактивного состояния.

Интеграция Cypress в CI/CD

Для автоматического запуска тестов Vue-компонентов в CI/CD среде можно использовать команду:

npx cypress run-ct --headless --browser chrome

Ключевые моменты:

  • run-ct — режим Component Testing.
  • --headless — без запуска графического интерфейса.
  • Поддерживаются все браузеры, совместимые с Cypress.

Тесты можно интегрировать с GitHub Actions, GitLab CI и другими инструментами для обеспечения непрерывного контроля качества компонентов Vue.

Оглавление