React Hook test с useState для внутреннего состояния

Question

Я исследовал множество ресурсов для тестирования внутреннего состояния с использованием useState с React Hook, но все еще не могу найти удовлетворительный ответ, некоторые тестовые примеры получают ожидаемое значение из mount или shallow, что отображаться на стороне пользовательского интерфейса, но не из внутреннего состояния (useState) компонента, что если компонент не отображает значение состояния на стороне пользовательского интерфейса, например:

const TestComponent = () => {
  const [count, setCount] = React.useState(0);

  return (
    <span>
      <button id="count-up" type="button" onClick={() => setCount(count + 1)}>Count Up</button>
    </span>
  );
}

Как можно написать контрольный пример для проверки

1) При монтировании компонента мое внутреннее состояние count будет инициализировано как 0?

2) Когда компонент имитирует событие onClick для кнопки count-up что мой setCount должен быть вызван, а мое внутреннее состояние count должно стать 1?

Answer 1

Вы можете использовать jest.spyOn в React, чтобы увидеть, вызывает ли компонент хук setState, для простого теста:

import React from "react";
import App from "./app";
import Enzyme, { shallow } from "enzyme";
import Adapter from "enzyme-adapter-react-16";

Enzyme.configure({ adapter: new Adapter() });

describe("App", () => {
  it("should call setState with initial values on component mount", () => {
    const mockSetState = jest.spyOn(React, "useState");

    shallow(<App />);

    expect(mockSetState).toHaveBeenCalledTimes(1);
    expect(mockSetState).toHaveBeenCalledWith(5);
  });
});

Вы также можете переместить useState в отдельный файл. и использовать его как пользовательский хук (может быть, ненужный слой, так что до вас) *

Рабочий пример в песочнице кода