Skip to content

jest.useFakerTimers 和 msw 有冲突? #52

@hepeng10

Description

@hepeng10

这是异步请求组件 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(); 注释的时候能通过测试,但是解开注释就测试不通过了。组件中异步请求后的代码都没执行,单元测试的代码就先执行完了。

不知道你有没有解决方案?我网上搜了都没搜到解决方案。。。

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions