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

Тестирование методов компонентов является важной частью обеспечения корректной работы логики во Vue-приложениях. Vue Test Utils (VTU) предоставляет инструменты для изоляции и проверки поведения методов без необходимости взаимодействия с DOM напрямую.

Монтирование компонента для тестов

Для начала необходимо импортировать нужные функции из Vue Test Utils и сам компонент:

import { mount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';

mount создаёт полноценный экземпляр компонента, включая его шаблон, реактивные свойства и методы. Для тестирования методов достаточно вызвать их через экземпляр, возвращаемый mount.

const wrapper = mount(MyComponent);

wrapper.vm предоставляет доступ к экземпляру Vue, что позволяет вызывать методы напрямую:

wrapper.vm.myMethod();

Тестирование синхронных методов

Синхронные методы проверяются путём прямого вызова и сравнения возвращаемого результата или изменения состояния компонента.

Пример:

methods: {
  incrementCounter() {
    this.counter += 1;
  }
}

Тест:

test('incrementCounter увеличивает counter на 1', () => {
  const wrapper = mount(MyComponent, {
    data() {
      return { counter: 0 };
    }
  });

  wrapper.vm.incrementCounter();
  expect(wrapper.vm.counter).toBe(1);
});

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

  • data в mount позволяет задавать начальное состояние для более контролируемого тестирования.
  • Методы вызываются через wrapper.vm.
  • Проверка состояния осуществляется с помощью Jest (или другого тестового фреймворка).

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

Методы часто принимают аргументы, что расширяет возможности тестов:

methods: {
  add(a, b) {
    return a + b;
  }
}

Тест:

test('add возвращает сумму аргументов', () => {
  const wrapper = mount(MyComponent);
  expect(wrapper.vm.add(2, 3)).toBe(5);
});

При тестировании методов с параметрами важно проверять все ветви логики, включая граничные значения.

Тестирование асинхронных методов

Асинхронные методы могут использовать async/await или возвращать промисы:

methods: {
  async fetchData() {
    const response = await fetch('/api/data');
    this.data = await response.json();
  }
}

Для тестирования таких методов используют мок-функции (jest.fn()) и await для ожидания выполнения:

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve({ id: 1, name: 'Test' }),
  })
);

test('fetchData устанавливает data после запроса', async () => {
  const wrapper = mount(MyComponent);
  await wrapper.vm.fetchData();
  expect(wrapper.vm.data).toEqual({ id: 1, name: 'Test' });
});

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

  • await гарантирует завершение асинхронной операции перед проверкой состояния.
  • Моки сетевых запросов предотвращают реальные HTTP-вызовы.
  • После выполнения метода проверяется обновлённое состояние компонента.

Проверка вызова методов через события

Методы компонента часто привязаны к событиям DOM. В VTU их можно проверить через trigger:

<template>
  <button @click="incrementCounter">Increment</button>
</template>

Тест:

test('клик по кнопке вызывает incrementCounter', async () => {
  const wrapper = mount(MyComponent, {
    data() { return { counter: 0 }; }
  });

  const button = wrapper.find('button');
  await button.trigger('click');
  expect(wrapper.vm.counter).toBe(1);
});

Важные моменты:

  • Использование await при trigger необходимо для реактивного обновления состояния.
  • Проверка метода может выполняться косвенно через изменение состояния или мок функции.

Моки и шпионы для методов

Jest позволяет создавать шпионы для проверки вызова метода:

test('метод вызывается при клике', async () => {
  const incrementSpy = jest.spyOn(MyComponent.methods, 'incrementCounter');
  const wrapper = mount(MyComponent);

  await wrapper.find('button').trigger('click');
  expect(incrementSpy).toHaveBeenCalled();
});

Шпионы полезны для:

  • Проверки количества вызовов метода.
  • Проверки аргументов метода.
  • Изоляции поведения метода от других частей компонента.

Рекомендации по тестированию методов

  1. Изолированное тестирование: вызывать методы напрямую через wrapper.vm для проверки логики без зависимости от DOM.
  2. Покрытие всех ветвей: тестировать все возможные пути выполнения метода, включая ошибки и граничные случаи.
  3. Асинхронные методы: всегда использовать await и моки для сторонних зависимостей.
  4. Комбинация с событиями: проверка вызова методов через события гарантирует, что привязки работают корректно.
  5. Шпионы и моки: позволяют отслеживать вызовы методов и их параметры без изменения состояния компонента.

Тщательное тестирование методов компонента повышает надёжность приложения, делает поведение компонентов предсказуемым и упрощает рефакторинг. Vue Test Utils предоставляет инструменты как для прямого вызова методов, так и для проверки их интеграции с реактивным состоянием и событиями.

Оглавление