Лучшие практики организации тестовых файлов

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

Структура каталогов тестов

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

Тесты рядом с компонентом Каждый компонент хранится вместе с тестом:
```
src/
  components/
    MyButton.vue
    MyButton.spec.js
```
Преимущества:
- Легко найти тест для конкретного компонента.
- Удобно при рефакторинге: изменения в компоненте сразу видны тестам.
Недостатки:
- Могут разрастаться каталоги с большим количеством файлов.
- Тесты не всегда формируют отдельный обзор всего приложения.
Централизованный каталог для тестов
```
tests/
  unit/
    components/
      MyButton.spec.js
src/
  components/
    MyButton.vue
```
Преимущества:
- Единая точка входа для запуска всех тестов.
- Легче интегрировать с CI/CD.
Недостатки:
- Связь между компонентом и тестом не сразу очевидна без просмотра структуры.

Часто применяют гибридный подход: критические или сложные компоненты имеют тесты рядом с исходным кодом, остальные — в отдельной папке.

Именование файлов тестов

Последовательность и читаемость имён тестов критичны. Рекомендуется использовать следующие принципы:

.spec.js / .test.js Пример: MyButton.spec.js. .spec.js указывает на то, что файл содержит спецификации тестирования, а .test.js — на тесты в общем понимании. Важно поддерживать единообразие в проекте.
Соответствие имени компонента Название тестового файла должно точно отражать тестируемый компонент:
```
ComponentName.vue → ComponentName.spec.js
```
Тестирование модулей или функциональности Если компонент содержит несколько логических частей или методов, можно использовать вложенные описания внутри тестов вместо создания отдельных файлов:
```
describe('MyButton.vue', () => {
  describe('props', () => { ... });
  describe('events', () => { ... });
  describe('slots', () => { ... });
});
```

Структура описаний и блоков в тестах

Vue Test Utils поддерживает стандартные функции Jest или Mocha, что позволяет использовать блоки describe, it и beforeEach для организации:

describe — группировка тестов по функциональности или свойствам компонента.
it / test — отдельный тест, описывающий конкретное поведение.
beforeEach / afterEach — подготовка окружения или очистка между тестами.

Пример:

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

describe('MyButton.vue', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = mount(MyButton, {
      props: { label: 'Click me' }
    });
  });

  afterEach(() => {
    wrapper.unmount();
  });

  it('отображает переданный label', () => {
    expect(wrapper.text()).toBe('Click me');
  });

  it('эмиттирует событие click', async () => {
    await wrapper.trigger('click');
    expect(wrapper.emitted()).toHaveProperty('click');
  });
});

Разделение юнит-тестов и интеграционных тестов

Юнит-тесты Проверяют отдельные компоненты, методы и рендеринг слотов. Хранятся обычно в tests/unit/components/ и выполняются быстро.
Интеграционные тесты Проверяют взаимодействие нескольких компонентов. Их удобно хранить в tests/integration/. Часто используют реальные маршруты, Vuex или Pinia, чтобы проверить поведение приложения в целом.

Использование общих утилит и моков

Для поддерживаемых тестов важно вынести повторяющийся код:

Файлы с моками для Vuex, Pinia, роутеров:
```
tests/unit/mocks/store.js
tests/unit/mocks/router.js
```

Функции-утилиты для монтирования компонентов с дефолтными настройками:

// tests/unit/utils/mountHelper.js
import { mount } from '@vue/test-utils';

export function mountWithProps(component, props = {}) {
  return mount(component, { props });
}

Такой подход уменьшает дублирование кода и упрощает внесение изменений в конфигурацию тестов.