Как замокать конкретную переменную из хука useState в тестируемом компоненте?

Для замокания конкретной переменной из хука useState в тестируемом компоненте в React, можно использовать библиотеку jest и функцию mockImplementation, которая позволяет переопределять поведение функции или значения переменной.

Во-первых, установите jest и @testing-library/react:

npm install --save-dev jest @testing-library/react

Предположим, у вас есть компонент Counter:

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

Теперь давайте напишем тест для этого компонента, чтобы замокать значение count:

import React from "react";
import { render, fireEvent } from "@testing-library/react";
import Counter from "./Counter";

test("should mock the useState value of count", () => {
  const mockSetCount = jest.fn();
  const originalUseState = React.useState;

  React.useState = jest.fn(() => [10, mockSetCount]);

  const { getByText } = render(<Counter />);

  expect(getByText("Count: 10")).toBeInTheDocument();

  fireEvent.click(getByText("Increment"));

  expect(mockSetCount).toHaveBeenCalledWith(11);
});

afterAll(() => {
  React.useState = originalUseState; // восстанавливаем оригинальный useState
});

В этом тесте мы используем функцию jest.fn() чтобы создать мок-функцию mockSetCount, которая заменит оригинальную функцию setCount из useState. Затем, перед рендерингом компонента Counter, мы переопределяем useState для возврата значения [10, mockSetCount]. Таким образом, в тестируемом компоненте count будет иметь значение 10, а не 0, и мы можем проверить изменение значения при клике на кнопку "Increment".

После выполнения теста, в блоке afterAll мы восстанавливаем оригинальную функцию React.useState, чтобы не повлиять на другие тесты.

Таким образом, мы замокаем конкретную переменную из хука useState в тестируемом компоненте, и можем проверить его поведение при разном значении этой переменной.