Организация тестовых данных (fixtures)

Тестовые данные (fixtures) играют ключевую роль в автоматизированном тестировании компонентов Vue. Их правильная организация позволяет создавать повторяемые, читаемые и масштабируемые тесты. Fixtures помогают отделять логику теста от конкретных данных, что облегчает поддержку и расширение тестового покрытия.

1. Виды тестовых данных

Тестовые данные можно классифицировать по нескольким признакам:

  • Статические данные — заранее подготовленные объекты, массивы или строки, которые не меняются между тестами. Применяются для проверки рендеринга компонента с предопределёнными свойствами.
  • Динамические данные — создаются во время выполнения теста, часто с использованием функций, которые генерируют случайные значения или изменяют структуру объекта в зависимости от сценария.
  • Мок-данные (mocked data) — данные, используемые для имитации внешних API, Vuex или пропсов. Чаще всего применяются для тестирования взаимодействия компонента с внешними источниками без реального подключения.

2. Организация файловой структуры fixtures

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

tests/
 ├─ unit/
 │   ├─ components/
 │   │   ├─ MyComponent.spec.js
 │   │   └─ fixtures/
 │   │       ├─ userData.js
 │   │       └─ productData.js

Такой подход позволяет:

  • Изолировать тестовые данные от логики теста.
  • Легко переиспользовать одни и те же данные для разных тестов.
  • Обеспечивать единообразие и предсказуемость тестов.

3. Форматы хранения данных

JavaScript объекты и массивы — самый гибкий способ. Позволяет создавать функции-генераторы данных, комбинировать различные сценарии, модифицировать отдельные поля.

// tests/unit/components/fixtures/userData.js
export const singleUser = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com'
};

export const multipleUsers = [
  { id: 1, name: 'Alice', email: 'alice@example.com' },
  { id: 2, name: 'Bob', email: 'bob@example.com' }
];

export const generateUser = (id) => ({
  id,
  name: `User${id}`,
  email: `user${id}@example.com`
});

JSON-файлы подходят для хранения больших наборов данных, которые не требуют логики генерации:

// tests/unit/components/fixtures/products.json
[
  { "id": 1, "name": "Laptop", "price": 1200 },
  { "id": 2, "name": "Smartphone", "price": 800 }
]

Использование JSON удобно, если данные должны быть совместимы с другими инструментами или передаваться между проектами.

4. Интеграция fixtures с Vue Test Utils

При использовании Vue Test Utils fixtures обычно подключаются к тестам через import. Они могут применяться для:

  • Пропсов (propsData) при монтировании компонента.
  • Состояния Vuex.
  • Параметров слотов.
  • Эмуляции ответов API через mocks.

Пример использования:

import { mount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';
import { singleUser, multipleUsers } from './fixtures/userData';

describe('MyComponent', () => {
  it('рендерит одного пользователя', () => {
    const wrapper = mount(MyComponent, {
      propsData: { user: singleUser }
    });
    expect(wrapper.text()).toContain('Alice');
  });

  it('рендерит список пользователей', () => {
    const wrapper = mount(MyComponent, {
      propsData: { users: multipleUsers }
    });
    expect(wrapper.findAll('li').length).toBe(2);
  });
});

5. Динамическое создание данных в тестах

Функции-генераторы позволяют создавать уникальные данные для каждого теста, избегая пересечения состояния между тестами:

import { mount } from '@vue/test-utils';
import UserList from '@/components/UserList.vue';
import { generateUser } from './fixtures/userData';

describe('UserList', () => {
  it('рендерит динамический список пользователей', () => {
    const users = Array.from({ length: 5 }, (_, i) => generateUser(i + 1));
    const wrapper = mount(UserList, {
      propsData: { users }
    });
    expect(wrapper.findAll('li').length).toBe(5);
  });
});

6. Моки и стабы с использованием fixtures

Fixtures часто комбинируются с моками для API и Vuex. Это обеспечивает контроль над состоянием и предотвращает побочные эффекты.

import { shallowMount } from '@vue/test-utils';
import UserProfile from '@/components/UserProfile.vue';
import { singleUser } from './fixtures/userData';

const mockStore = {
  state: { user: singleUser },
  getters: { userName: state => state.user.name }
};

const wrapper = shallowMount(UserProfile, {
  global: {
    mocks: { $store: mockStore }
  }
});

expect(wrapper.text()).toContain('Alice');

7. Практические рекомендации

  • Данные должны быть максимально приближены к реальным сценариям использования компонента.
  • Избегать избыточной детализации: включать только необходимые поля.
  • Для больших приложений создать централизованную папку fixtures, которую можно использовать во всех модулях.
  • Использовать функции-генераторы для динамических и уникальных данных.
  • Стремиться к читаемости и переиспользуемости: тесты должны быть понятны без необходимости изучать данные в глубине.

Организация fixtures — фундамент для стабильных, предсказуемых и поддерживаемых тестов Vue компонентов. Правильная структура, сочетание статических и динамических данных, а также интеграция с моками и Vuex создают основу качественного автоматизированного тестирования.

Оглавление