我如何测试 useState 钩子是否被 jest 和 react 测试库调用？

Question

我有这个组件，我想使用 Jest 和 React 测试库进行测试：

export function GenericDivider({ stepsHeader = [], componentsFactory = [] }) {
   const [currentPage, changePage] = useState(0);
   const Component = componentsFactory[currentPage] || (() => <></>);

   return (
    <div className="container page__container">
          ...
                 <a
                   href="#"
                   key={name}
                   onClick={e => {
                     e.preventDefault();
                     if (index < componentsFactory.length) changePage(index);
                   }}
                   className={`nav-link ${currentPage === index && 'active'}`}
                 >
                   {name}
                 </a>
          ...
    </div>
   );
}

export default memo(GenericDivider);

我想测试当我点击时是否调用了 changePage，有没有办法使用 Jest 和 React 测试库来做到这一点？

我是测试新手，我试过这个，但它似乎不起作用

it('Should call changePage when button clicked', () => {
    const changePage = jest.fn();

    const { container } = render(
      <GenericDivider
        stepsHeader={['hamid', 'walid', 'khalid']}
        componentsFactory={[() => <></>, () => <></>, () => <></>]}
      />,
    );

    const button = container.querySelector('a');
    fireEvent.click(button);
    expect(changePage).toHaveBeenCalled();
  });

Answer 1

简短的回答：不。

测试内部状态变量非常违背react-testing-library背后的理念。该库专注于用户以及用户可以看到的内容。用户没有状态变量的概念。不要进行测试，而是考虑用户会看到的变化，并进行测试。UI如何更新？显示什么不同的标记或样式？从用户的角度考虑如何进行测试，您就会找到答案。

查看react-testing-library 的指导原则以获取更多背景信息。然后浏览此页面，了解哪些查询对您的用例最有意义的指南。