Вызов методов из теста

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

Доступ к методам компонента

После создания экземпляра компонента с помощью mount или shallowMount, методы становятся доступны через объект vm (Vue instance):

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

const wrapper = mount(MyComponent);

// Вызов метода напрямую
wrapper.vm.myMethod();

Важно: использование wrapper.vm позволяет обращаться к любым публичным методам компонента, а также к реактивным свойствам (data и computed).

Передача аргументов в методы

Методы компонентов часто принимают аргументы. В тестах можно вызывать их с необходимыми значениями и проверять результат:

test('myMethod возвращает правильное значение', () => {
  const wrapper = mount(MyComponent);
  const result = wrapper.vm.myMethod(5, 10);
  expect(result).toBe(15);
});

Это позволяет тестировать методы в изоляции от шаблона и реактивной системы.

Тестирование побочных эффектов

Методы компонента могут изменять состояние реактивных данных или вызывать мутации в Vuex, события, или другие методы. После вызова метода проверяется состояние компонента через wrapper.vm или wrapper.emitted().

Пример изменения data:

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

  wrapper.vm.increment();
  expect(wrapper.vm.count).toBe(1);
});

Пример проверки события:

test('sendEvent эмитит событие', () => {
  const wrapper = mount(MyComponent);

  wrapper.vm.sendEvent('test');
  expect(wrapper.emitted().customEvent).toBeTruthy();
  expect(wrapper.emitted().customEvent[0]).toEqual(['test']);
});

Шпион на метод компонента

Для контроля вызова методов и проверки количества их вызовов используется jest.fn() или встроенные шпионы. Это особенно полезно при тестировании внутренних вызовов между методами:

test('handleClick вызывает updateValue', () => {
  const wrapper = mount(MyComponent);
  const spy = jest.spyOn(wrapper.vm, 'updateValue');

  wrapper.vm.handleClick();
  expect(spy).toHaveBeenCalled();
});

Шпионы могут также проверять аргументы вызова:

expect(spy).toHaveBeenCalledWith(42);

Асинхронные методы

Многие методы выполняют асинхронные операции (например, обращения к API). Для их тестирования используются async/await вместе с nextTick, чтобы дождаться обновления реактивных данных:

test('fetchData обновляет state после асинхронного запроса', async () => {
  const wrapper = mount(MyComponent);
  await wrapper.vm.fetchData();
  await wrapper.vm.$nextTick();

  expect(wrapper.vm.items.length).toBeGreaterThan(0);
});

Использование nextTick гарантирует, что все реактивные изменения завершены, и тест проверяет актуальное состояние.

Комбинирование вызова методов и симуляции событий

Часто методы вызываются не напрямую, а через взаимодействие с DOM, например, клик по кнопке:

test('click по кнопке вызывает increment', async () => {
  const wrapper = mount(MyComponent);
  const spy = jest.spyOn(wrapper.vm, 'increment');

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

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

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

  • Методы приватного назначения (начинающиеся с _) можно тестировать через vm, но такие вызовы считаются тестированием внутренней реализации. Стоит использовать их с осторожностью.
  • Вызов метода напрямую не всегда воспроизводит реальные сценарии работы с компонентом. Если важен поток взаимодействия с DOM или событиями, предпочтительно использовать trigger.
  • Для сложных методов с побочными эффектами рекомендуется создавать отдельные юнит-тесты для каждой ветки логики, избегая громоздких универсальных тестов.

Вывод

Вызов методов через wrapper.vm — основной инструмент для проверки внутренней логики Vue-компонентов. Он обеспечивает доступ к реактивным данным, позволяет контролировать побочные эффекты и интеграцию с другими частями компонента. Комбинация прямого вызова, шпионов и симуляции событий создаёт полный набор возможностей для точного и надёжного тестирования.

Оглавление