Unit тесты компонентов

Unit тестирование является важной частью разработки компонентов в Atomico, поскольку позволяет изолированно проверять поведение отдельных элементов интерфейса, их реакцию на свойства, события и внутреннее состояние. Atomico предоставляет удобные инструменты для интеграции с популярными фреймворками тестирования, такими как Jest и Testing Library, обеспечивая высокую точность проверки.

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

Тестирование компонентов в Atomico строится на нескольких ключевых принципах:

  • Изоляция — каждый компонент тестируется отдельно, без зависимости от внешних данных.
  • Предсказуемость — результат работы компонента должен быть детерминированным при одинаковых входных данных.
  • Симуляция событий — проверяется реакция на пользовательские действия: клики, ввод текста, изменения состояния.

Файлы тестов обычно располагаются рядом с компонентами, например:

src/components/button.js
src/components/button.test.js

Такой подход упрощает поддержку и обеспечивает ясную структуру проекта.

Создание компонента для тестирования

Пример простого компонента кнопки в Atomico:

import { c, useState } from "atomico";

function Button({ label }) {
    const [clicked, setClicked] = useState(false);

    return (
        <button
            oncl ick={() => setClicked(true)}
        >
            {clicked ? "Clicked!" : label}
        </button>
    );
}

Button.props = {
    label: String
};

export const button = c(Button);

Компонент имеет состояние (clicked) и свойство (label), что делает его отличным объектом для unit тестирования.

Настройка тестовой среды

Для интеграции с Jest и Testing Library необходимо:

  1. Установить зависимости:
npm install --save-dev jest @testing-library/dom @testing-library/jest-dom
  1. Настроить Jest для работы с веб-компонентами:
// jest.config.js
module.exports = {
    testEnvironment: "jsdom",
    setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"]
};

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

Проверка правильного отображения начального состояния:

import { html, render } from "atomico";
import { button } from "./button";

test("рендерит кнопку с переданным текстом", () => {
    const root = document.createElement("div");
    render(root, html`<${button} label="Click me" />`);

    const btn = root.querySelector("button");
    expect(btn).toBeInTheDocument();
    expect(btn.textContent).toBe("Click me");
});

Ключевые моменты:

  • Использование html из Atomico позволяет создавать компоненты в тестах аналогично JSX.
  • Проверка наличия элемента в DOM и его текста обеспечивает базовую валидацию рендера.

Тестирование событий

Проверка реакции на пользовательские действия:

test("клик изменяет текст кнопки", () => {
    const root = document.createElement("div");
    render(root, html`<${button} label="Click me" />`);

    const btn = root.querySelector("button");
    btn.click();

    expect(btn.textContent).toBe("Clicked!");
});

Особенности:

  • События в Atomico работают через стандартные DOM-обработчики.
  • useState автоматически обновляет DOM при изменении состояния, что упрощает тестирование интерактивных компонентов.

Тестирование пропсов

Компоненты Atomico используют статическое свойство props для описания ожидаемых свойств. Unit тесты могут проверять корректную работу с разными значениями пропсов:

test("изменение пропса label обновляет текст", () => {
    const root = document.createElement("div");
    const instance = render(root, html`<${button} label="First" />`);
    
    instance.props = { label: "Second" };
    
    const btn = root.querySelector("button");
    expect(btn.textContent).toBe("Second");
});

Такой подход гарантирует, что компонент корректно реагирует на обновление входных данных.

Mocking и изоляция зависимостей

Если компонент зависит от внешних функций или сервисов, их можно мокировать:

import { fetchData } from "./api";

jest.mock("./api");

test("обработка данных с API", async () => {
    fetchData.mockResolvedValue({ name: "Test" });

    const root = document.createElement("div");
    render(root, html`<${myComponent} />`);

    // ожидание асинхронного обновления
    await new Promise(r => setTimeout(r, 0));

    const element = root.querySelector(".name");
    expect(element.textContent).toBe("Test");
});

Mocking позволяет проверять компонент в чистом виде, без зависимости от реального API.

Полезные советы

  • Компоненты должны быть максимально функциональными и предсказуемыми, чтобы unit тесты могли проверять их без сложной конфигурации.
  • Использование html-функции Atomico в тестах упрощает создание DOM-структуры.
  • Тестирование состояния через useState позволяет выявить ошибки реактивности на раннем этапе.
  • Проверка событий и пропсов обеспечивает полноту покрытия функциональности.

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

Оглавление