[英]How to use jest.useFakeTimers(); with react
I have a simple component, I would like ot test setInterval(), basically after forwarding the timer the snapshots should show 3 but instead is always on 0. Any idea what is wrong in my code?我有一个简单的组件,我想测试 setInterval(),基本上在转发计时器之后快照应该显示 3 但始终显示为 0。知道我的代码有什么问题吗? Thanks谢谢
component:零件:
import React from 'react';
export function Test(): JSX.Element {
const [counter, setCounter] = React.useState(0);
React.useEffect(() => {
const id = setInterval(() => {
setCounter(counter + 1);
}, 1000);
return clearInterval(id);
});
return <div>{counter}</div>;
}
test:测试:
import React from 'react';
import renderer, { act } from 'react-test-renderer';
import { Test } from './Test';
describe('test', () => {
jest.useFakeTimers();
it('should xx', () => {
const tree = renderer.create(<Test />);
act(() => {
jest.advanceTimersByTime(3000);
expect(tree).toMatchSnapshot();
});
});
});
result:结果:
// Jest Snapshot v1
exports[`test should xx 1`] = `
<div>
0
</div>
`;
I think you are clearing the interval just after creating it.我认为您是在创建间隔后立即清除间隔。 I mean you are returning clearInterval(id).我的意思是你正在返回 clearInterval(id)。 Instead just return the id.而只是返回 id。
import React from 'react'; export function Test(): JSX.Element { const [counter, setCounter] = React.useState(0); React.useEffect(() => { const id = setInterval(() => { setCounter(counter + 1); }, 1000); return id; }); return <div>{counter}</div>; }
You need to change useEffect so it may return a clean-up function, like:您需要更改 useEffect 以便它可能返回清理 function,例如:
import React from 'react';
export function Test(): JSX.Element {
const [counter, setCounter] = React.useState(0);
React.useEffect(() => {
const interval = setInterval(() => {
setCounter(counter + 1);
}, 1000);
return () => clearInterval(interval);
});
return <div>{counter}</div>;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.