写Jest时必须setTimeout的情况

无法使用jest.useFakeTimers的情况: setTimeout中出现了ref.current,且使用这个ref的组件还未渲染

具体的业务场景是写了一个按钮,在点击之后Modal弹窗会显示,500ms后弹窗中的输入框会获得焦点

ts 复制代码
onClick={() => {
  open();
  setTimeout(() => {
    ref.current.focus();
  }, 500);
}}

如上代码所示,当你打算在setTimeout中访问ref.current时,且如果使用了如下代码

js 复制代码
// 指定 Jest 使用假的全局日期、性能、时间和定时器 API
beforeEach(() => {
  jest.useFakeTimers()
});
afterEach(() => {
  jest.runOnlyPendingTimers()
  jest.useRealTimers()
});

user.click(button)就会超时,此时,如果你使用waitFor将其包裹,则会看到真正的报错

js 复制代码
await waitFor(() => user.click(button));
javascript 复制代码
    TypeError: Cannot read properties of null (reading 'focus')

  36 |         setTimeout(() => {
> 37 |           ref.current.focus();
     |                       ^
  38 |         }, 500);
  39 |       }}

根因是因为jest.useFakeTimers运行了之后,setTimeout会立即执行,不会等待,而这时的ref.current还未被赋值。

React提供的act函数可以在包裹一段代码后,可以等待react组件渲染完成。

一般我们可以把它包在render函数之外,如下代码所示:

js 复制代码
it ('renders with button disabled', async () => {
  await act(async () => {
    root.render(<TestComponent />)
  });
  expect(container.querySelector('button')).toBeDisabled();
});

这样即使TestComponent中使用了useRef,对应的ref也能获取到值。

但由于我们测试的是modal组件,需要点击之后才显示,所以无法使用这个方案。

所以解决方案就是,删除jest.useFakeTimers相关代码,让setTimeout异步执行,这样ref才能在click后有时间获取到值。由于此时需要等待500ms,所以我们也需要setTimeout,由于此时react组件会更新,所以我们需要用act包裹,所以最终的解决方案就是

tsx 复制代码
const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
it('点击按钮后,出现弹窗且输入框获得焦点', async () => {
  const user = userEvent.setup();
  render(
    <Modal>
      <Button>创建</Button>
    </Modal>
  );
  const button = screen.getByText('创建');
  await user.click(button);
  await act(async () => await sleep(500)); // 等待ref获得值并focus
  expect(screen.getByPlaceholderText('请输入')).toHaveFocus();
});
相关推荐
AI智能研究院11 分钟前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js
qq77982334014 分钟前
React组件完全指南
前端·javascript·react.js
qq77982334041 分钟前
React Hooks完全指南
前端·javascript·react.js
DoraBigHead1 小时前
React Fiber:从“递归地狱”到“时间切片”的重生之路
前端·javascript·react.js
HHHHHY3 小时前
使用阿里lowcode,封装SearchDropdown 搜索下拉组件
前端·react.js
KenXu5 小时前
TanStack Router 深度分析:与 React Router 的对比
react.js
浮游本尊6 小时前
React 18.x 学习计划 - 第五天:React状态管理
前端·学习·react.js
crary,记忆10 小时前
MFE: React + Angular 混合demo
前端·javascript·学习·react.js·angular·angular.js
一个处女座的程序猿O(∩_∩)O12 小时前
React 多组件状态管理:从组件状态到全局状态管理全面指南
前端·react.js·前端框架
鹏多多12 小时前
用useTransition解决React性能卡顿问题+实战例子
前端·javascript·react.js