Настройка тестового окружения

FAST Element — это современная библиотека для создания веб-компонентов на базе стандарта Web Components с упором на производительность и реактивность. Для работы с ней требуется корректно настроенное тестовое окружение, которое обеспечит удобное написание и запуск тестов.

Установка зависимостей

Базовый стек для работы с FAST Element включает Node.js (версии 18 и выше) и npm или Yarn для управления пакетами. Для создания проекта необходимо выполнить:

npm init -y
npm install @microsoft/fast-element
npm install --save-dev vitest jsdom @testing-library/dom
  • @microsoft/fast-element — основной пакет библиотеки.
  • vitest — современный тестовый раннер, совместимый с Vite.
  • jsdom — симуляция DOM в среде Node.js.
  • @testing-library/dom — утилиты для удобного взаимодействия с DOM в тестах.

Настройка конфигурации Vitest

В корне проекта создается файл vitest.config.js или vitest.config.ts:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './test/setup.js',
  },
});
  • environment: 'jsdom' — обеспечивает работу тестов с DOM в Node.js.
  • globals: true — включает глобальные функции вроде describe и it.
  • setupFiles — путь к файлу, который выполняется перед тестами, например, для регистрации компонентов.

Инициализация FAST Element в тестах

В test/setup.js можно зарегистрировать общие элементы:

import { FASTElement, html, css } from '@microsoft/fast-element';

export class TestButton extends FASTElement {
  static styles = css`
    button {
      background-color: #0078d4;
      color: white;
      padding: 0.5em 1em;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  `;

  handleClick() {
    console.log('clicked');
  }
}

FASTElement.define({ name: 'test-button', template: html`<button @click=${x => x.handleClick()}>Click me</button>` }, TestButton);

Такой подход позволяет в тестах использовать компонент как обычный HTML-элемент:

import { screen, fireEvent } from '@testing-library/dom';

it('кнопка реагирует на клик', () => {
  document.body.innerHTML = `<test-button></test-button>`;
  const button = screen.getByText('Click me');
  fireEvent.click(button);
  // Здесь можно добавить проверки состояния или вызов функций
});

Настройка TypeScript (опционально)

Для проектов на TypeScript создается файл tsconfig.json с поддержкой модулей и декораторов:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "Node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src", "test"]
}

FAST Element использует современный синтаксис ECMAScript и декораторы, поэтому эти опции критически важны.

Организация тестов

Структура проекта обычно выглядит так:

project/
│─ src/
│  └─ components/
│     └─ button.ts
│─ test/
│  ├─ setup.js
│  └─ button.test.js
├─ package.json
└─ vitest.config.js
  • src/components/ — исходные компоненты FAST Element.
  • test/ — тесты и файлы конфигурации.
  • setup.js — регистрация общих элементов для всех тестов.

Тесты выполняются командой:

npx vitest run

или в режиме наблюдения:

npx vitest watch

Работа с реактивными свойствами и событиями

FAST Element использует @observable для реактивных свойств. Пример тестирования реактивного свойства:

import { FASTElement, html, observable } from '@microsoft/fast-element';

class Counter extends FASTElement {
  @observable count = 0;

  increment() {
    this.count++;
  }
}

FASTElement.define({ name: 'counter-element', template: html`<button @click=${x => x.increment()}>${x => x.count}</button>` }, Counter);

it('увеличивает счетчик при клике', () => {
  document.body.innerHTML = `<counter-element></counter-element>`;
  const button = document.querySelector('counter-element button');
  button.click();
  expect(button.textContent).toBe('1');
});

Использование реактивных свойств позволяет тестам проверять динамическое поведение компонента без сложных манипуляций с DOM.

Моки и изоляция тестов

Для сложных компонентов рекомендуется очищать DOM перед каждым тестом:

beforeEach(() => {
  document.body.innerHTML = '';
});

Если компонент взаимодействует с внешними API, можно использовать vi.fn() для создания заглушек:

const mockCallback = vi.fn();
mockCallback();
expect(mockCallback).toHaveBeenCalled();

Это обеспечивает полную изоляцию тестов и предотвращает нежелательные побочные эффекты.

Интеграция с CI/CD

Тесты на Vitest легко интегрируются с CI/CD. Достаточно добавить скрипт в package.json:

"scripts": {
  "test": "vitest run"
}

На сервере сборки достаточно выполнить npm run test, при этом окружение jsdom обеспечивает корректное выполнение тестов без браузера.

Настроенное таким образом тестовое окружение позволяет писать чистые, изолированные и эффективные тесты для компонентов FAST Element, полностью используя реактивность, шаблоны и современный синтаксис библиотеки.

Оглавление