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背后的理念。该库专注于用户以及用户可以看到的内容。用户没有状态变量的概念。与其测试，不如考虑用户将看到的更改，然后进行测试。用户界面如何更新？显示哪些不同的标记或样式？考虑如何从用户的角度进行测试，您将找到答案。

请查看react-testing-library的Guiding Principles，以获取更多背景信息。然后浏览this page，了解有关哪种查询最适合您的用例的指南。

我该如何测试用玩笑是否已调用useState挂钩并做出反应测试库？

1 个答案: