React Native使用Jest测试Stack Navigator报环境销毁后导入错误

错误原因 #

这个报错本质是Jest测试环境销毁后，仍有未执行完成的异步副作用回调在尝试访问React Native或导航相关模块：
React Navigation的NavigationContainer内部默认挂载了大量异步副作用逻辑，包括返回键事件监听、深度链接订阅、组件生命周期回调等。你的测试用例仅在组件渲染完成后就执行完断言逻辑，Jest会直接销毁测试环境，但NavigationContainer内部的异步副作用还没执行完毕，后续回调执行时尝试导入访问相关模块就触发了该错误。测试全部通过是因为断言逻辑在副作用执行前就已经完成校验，不影响测试结果本身。

解决方案 #

根据你的测试需求可以选择以下任意一种方案：

方案1：等待所有异步任务执行完毕 #

你当前的测试用例声明了async但没有等待任何异步逻辑，只需要在每个测试用例末尾增加等待逻辑，等所有副作用执行完成后再结束测试即可：

// 没有测试库的话也可以用setImmediate替代waitFor
describe('<App /> Basics', () => {
  it('has 1 child', async () => {
    const tree = renderer.create(<App />).toJSON();
    expect(tree.children.length).toBe(1);
    // 等待所有微/宏任务执行完毕
    await new Promise(resolve => setImmediate(resolve));
  });
  // 其余测试用例同理添加上述等待逻辑
});

方案2：Mock NavigationContainer规避内部副作用 #

如果你的测试不需要验证导航真实逻辑，仅需要验证App组件的基本渲染，可以直接Mock掉NavigationContainer，屏蔽内部的副作用逻辑：
在测试文件顶部添加如下Mock代码：

jest.mock('@react-navigation/native', () => {
  const original = jest.requireActual('@react-navigation/native');
  return {
    ...original,
    NavigationContainer: ({ children }) => <>{children}</>,
  };
});

这个Mock会把NavigationContainer替换为空的React片段，直接返回子组件，不会触发任何内部的异步监听逻辑，从根源上避免报错。

方案3：使用标准测试工具适配导航逻辑 #

如果需要测试真实的导航跳转逻辑，建议使用@testing-library/react-native作为测试渲染工具，在每个测试用例结束前主动调用cleanup()方法销毁组件实例，清除所有已注册的事件监听，即可避免残留的异步回调触发报错。

内容的提问来源于stack exchange，提问作者Ken Ingram