当我在测试用例中更新功能组件的属性时,它没有触发useEffect,但是它更新了myComp中的属性。
组件示例:
const myComp = ({userId, myAction}) => {
useEffect(() => {
myAction(userId);
}, [userId]);
return <div>Test</div>
}
测试用例示例:
.....
describe('Testing MyComp', () => {
it('should call myAction with userID', () => {
const userId = 'testId';
wrapper.setProps({userId});
expect(myAction).toHaveBeenCalledWith(userId);
});
});
3条答案
按热度按时间yduiuuwa1#
在React浅渲染器中不调用
useEffect()
和useLayoutEffect()
。请参见useEffect not called when the component is shallow renderered和this issue。您应该使用
mount
函数。例如
index.tsx
:index.test.tsx
:测试结果:
软件包版本:
8aqjt8rx2#
@slideshowp2上面的答案是正确的,但是如果你像我一样发现
setProps
即使在你使用mount的时候仍然不工作,这可能是对你有用的信息。React可能会将多个
setState()
调用的状态更新批量处理成一个更新(看看这个),这 * 可能 * 是异步的,因此expect get被触发,但setState还没有运行(因为它在JS事件循环中等待运行),您的测试失败。您可能会问,如何避免这种情况?将您的expect封装在
setTimeout
中,以便它在相同的异步位置结束,并将在setState
之后运行!大概是这样的
另外,请注意,我不喜欢这个,但它确实有效。
csbfibhn3#
要触发任何钩子,您需要使用这个包-https://github.com/mikeborozdin/jest-react-hooks-shallow
那么在你的测试中