Из каких этапов состоит Unit тест

Из каких этапов состоит Unit тест

Unit тест - это проверка отдельного модуля или компонента в изоляции. Каждый тест состоит из трёх критических этапов, известных как паттерн AAA (Arrange-Act-Assert).

Этап 1: Arrange (Подготовка)

На этом этапе создаём необходимые условия для теста:

• Инициализируем переменные и объекты
• Настраиваем mock-объекты и шпионы
• Подготавливаем тестовые данные
• Устанавливаем начальное состояние

describe("Button Component", () => {
  it("should render with correct text", () => {
    // Arrange
    const buttonText = "Click me";
    const { getByRole } = render(<Button>{buttonText}</Button>);
  });
});

Этап 2: Act (Действие)

Выполняем тестируемое действие:

• Вызываем функцию или метод
• Имитируем пользовательское взаимодействие (клик, ввод)
• Изменяем состояние компонента
• Выполняем запросы или изменения DOM

it("should call onClick when clicked", () => {
  const mockClick = jest.fn();
  const { getByRole } = render(<Button onClick={mockClick}>Click</Button>);
  
  // Act
  const button = getByRole("button");
  fireEvent.click(button);
});

Этап 3: Assert (Проверка)

Проверяем ожидаемый результат:

• Проверяем возвращаемые значения
• Убеждаемся, что функции были вызваны
• Проверяем изменения состояния
• Подтверждаем видимость элементов в DOM

it("should call onClick when clicked", () => {
  const mockClick = jest.fn();
  const { getByRole } = render(<Button onClick={mockClick}>Click</Button>);
  
  const button = getByRole("button");
  fireEvent.click(button);
  
  // Assert
  expect(mockClick).toHaveBeenCalledTimes(1);
  expect(button).toHaveTextContent("Click");
});

Полный пример

it("should increment counter when button clicked", () => {
  // Arrange
  const { getByRole, getByText } = render(<Counter initialValue={0} />);
  
  // Act
  const button = getByRole("button");
  fireEvent.click(button);
  
  // Assert
  expect(getByText("1")).toBeInTheDocument();
});

Дополнительные этапы

Иногда добавляют четвёртый этап:

Cleanup (Очистка) - удаление созданных объектов и сброс состояния:

afterEach(() => {
  jest.clearAllMocks();
  cleanup();
});

Правильная структура unit тестов делает их читаемыми, поддерживаемыми и гарантирует, что каждый компонент работает так, как ожидается.