如何测试依赖Promise的React Native函数式组件并获取更新后快照

问题原因 #

你的测试是同步执行的，执行快照生成时，250ms的setInterval定时器尚未触发，且即使定时器触发，Promise.then的微任务也还没执行完成，所以只能拿到初始状态的渲染结果。

解决方案 #

用Jest内置的假定时器能力模拟时间流逝，同时清空Promise微任务队列，等待状态更新完成后再生成快照即可，修改后的测试代码如下：

import * as React from "react";
import renderer from "react-test-renderer";
// 注意：组件是命名导出，不要用默认导入
import { PromiseDependencyComponent } from "../PromiseDependencyComponent";

it("PromiseDependencyComponent renders correctly", async () => {
  // 开启假定时器替换全局定时器方法
  jest.useFakeTimers();
  const componentRenderer = renderer.create(<PromiseDependencyComponent />);

  // 快进250ms，触发setInterval的回调执行
  jest.advanceTimersByTime(250);
  // 等待Promise微任务队列清空，保证then内的setVal执行完成
  await Promise.resolve();
  // 更新渲染器获取最新渲染结果
  componentRenderer.update();

  const tree = componentRenderer.toJSON();
  expect(tree).toMatchSnapshot();
  
  // 清理假定时器，避免影响其他用例
  jest.useRealTimers();
});

额外优化建议 #

你当前组件内的setInterval没有配置清理逻辑，实际运行时会持续触发回调和状态更新，建议在useEffect中返回清理函数：

useEffect(() => {
  const timer = setInterval(() => {
    promisedVal.then( (obj) =>
      setVal(obj); 
    );
  }, 250);
  // 组件卸载时清理定时器
  return () => clearInterval(timer);
}, []);

内容的提问来源于stack exchange，提问作者Austin Brown