如何测试 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 的 Guiding Principles for more context. Then take a look through this page 指南，了解哪些查询对您的用例最有意义。

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

how can I test if useState hook has been called with jest and react testing library?

javascript

reactjs

jestjs

react-testing-library