这是异步请求组件 demo
const Request: React.FC = () => {
const [num, setNum] = useState<number>();
const onClick = async() => {
const res = await getNumber(); // 发送异步请求
console.log('res:', res);
setNum(res.number);
};
return (
<>
<View data-testId="requestBtn" className={styles.container} onClick={onClick}>发送请求</View>
<Text data-testId="num">{num}</Text>
</>
);
};
模拟了接口请求
rest.post(`service/getNumber`, async(req, res, ctx) => {
return res(
ctx.status(200),
ctx.json({
number: 10
})
);
}),
这是单元测试
import { render, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Request from './index';
describe('Request', () => {
test('mock 接口请求', async() => {
// jest.useFakeTimers();
const { getByTestId } = render(<Request />);
userEvent.click(getByTestId('requestBtn'));
await waitFor(() => {
expect(getByTestId('num')).toHaveTextContent('10');
});
});
});
当上面的 jest.useFakeTimers(); 注释的时候能通过测试,但是解开注释就测试不通过了。组件中异步请求后的代码都没执行,单元测试的代码就先执行完了。
不知道你有没有解决方案?我网上搜了都没搜到解决方案。。。
这是异步请求组件 demo
模拟了接口请求
这是单元测试
当上面的 jest.useFakeTimers(); 注释的时候能通过测试,但是解开注释就测试不通过了。组件中异步请求后的代码都没执行,单元测试的代码就先执行完了。
不知道你有没有解决方案?我网上搜了都没搜到解决方案。。。