Работа с query параметрами

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

Импорт необходимых модулей

Для тестирования компонентов с query параметрами потребуется:

import { mount, shallowMount } from '@vue/test-utils';
import { createRouter, createWebHistory } from 'vue-router';
import MyComponent from '@/components/MyComponent.vue';
  • mount и shallowMount используются для рендеринга компонента.
  • createRouter и createWebHistory нужны для создания имитации роутера внутри теста.

Настройка маршрутизатора с query параметрами

Чтобы тестировать компоненты, которые зависят от query параметров, необходимо создать роутер с фиктивным маршрутом:

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/items',
      name: 'Items',
      component: MyComponent,
    },
  ],
});

Для передачи query параметров при навигации можно использовать:

await router.push({ name: 'Items', query: { page: '2', sort: 'desc' } });
await router.isReady();

Ключевой момент: router.isReady() гарантирует, что роутер завершил инициализацию перед монтированием компонента.

Монтирование компонента с роутером

Компонент необходимо монтировать с провайдером роутера:

const wrapper = mount(MyComponent, {
  global: {
    plugins: [router],
  },
});

Это позволяет компоненту получать доступ к this.$route и this.$router, что необходимо для работы с query параметрами.

Чтение query параметров внутри теста

После монтирования можно проверять значения query параметров через wrapper.vm.$route.query:

expect(wrapper.vm.$route.query.page).toBe('2');
expect(wrapper.vm.$route.query.sort).toBe('desc');

Если компонент использует computed или методы для обработки query параметров, можно протестировать их реакцию:

it('должен фильтровать элементы по query параметру sort', async () => {
  await router.push({ name: 'Items', query: { sort: 'asc' } });
  await router.isReady();
  const wrapper = mount(MyComponent, { global: { plugins: [router] } });

  expect(wrapper.vm.sortedItems[0].name).toBe('FirstItem');
});

Изменение query параметров внутри теста

Для проверки реактивного поведения компонента при изменении query параметров используется повторный push:

await router.push({ name: 'Items', query: { page: '3' } });
await wrapper.vm.$nextTick();

expect(wrapper.vm.currentPage).toBe(3);
  • await wrapper.vm.$nextTick() обеспечивает обновление реактивных данных после изменения маршрута.
  • Проверка состояния компонента после изменения query параметров позволяет убедиться в корректной реакции на маршрутизацию.

Использование shallowMount и spy для методов обработки query

Если требуется протестировать только логику обработки query без рендеринга дочерних компонентов:

const wrapper = shallowMount(MyComponent, { global: { plugins: [router] } });
const spy = jest.spyOn(wrapper.vm, 'handleQueryChange');

await router.push({ name: 'Items', query: { filter: 'active' } });
await wrapper.vm.$nextTick();

expect(spy).toHaveBeenCalledWith({ filter: 'active' });
  • shallowMount исключает рендеринг дочерних компонентов, ускоряя тесты.
  • Spy позволяет убедиться, что методы вызваны с правильными аргументами при изменении query параметров.

Тестирование реактивных watch и computed

Компоненты часто используют watch на $route.query или computed свойства для обработки параметров. Для тестирования их реактивности необходимо:

  1. Изменить query через роутер.
  2. Дождаться следующего тика.
  3. Проверить обновленные значения свойств компонента.

Пример теста watch:

it('должен обновлять filteredItems при изменении query.filter', async () => {
  await router.push({ name: 'Items', query: { filter: 'completed' } });
  await wrapper.vm.$nextTick();

  expect(wrapper.vm.filteredItems.every(item => item.status === 'completed')).toBe(true);
});

Советы по написанию тестов с query параметрами

  • Всегда использовать await router.isReady() перед монтированием.
  • Проверять реактивные свойства через $nextTick.
  • Использовать shallowMount для ускорения тестов при проверке логики.
  • Spy методы обработки query позволяют точно тестировать внутренние вызовы без зависимости от DOM.

Работа с query параметрами в Vue Test Utils позволяет не только тестировать маршрутизацию, но и полностью контролировать реактивность компонентов, обеспечивая надёжность и предсказуемость поведения приложения.

Оглавление