我有这个组件,我想使用 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();
});
最佳答案
简短回答:不要。
测试内部状态变量非常违背react-testing-library背后的理念。该库专注于用户以及用户可以看到的内容。用户没有状态变量的概念。不要进行测试,而是考虑用户会看到的变化,并进行测试。 UI如何更新?显示什么不同的标记或样式?从用户的 Angular 考虑如何进行测试,您就会找到答案。
查看react-testing-library的Guiding Principles了解更多背景信息。那就通过this page看看吧了解哪些查询对您的用例最有意义的指南。
关于javascript - 如何测试 useState 钩子(Hook)是否已使用 jest 和 React 测试库调用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60100133/