使用 jest-next-dynamic 测试动态导入

Posted 2023-02-22

【中文标题】使用 jest-next-dynamic 测试动态导入

【英文标题】：Jest testing dynamic import with jest-next-dynamic

【发布时间】：2021-12-09 22:54:47

【问题描述】：

我正在尝试在 nextjs 版本 10.2.3 中测试动态导入，我尝试使用避免抛出错误的 jest-next-dynamic 库

类型错误：require.resolveWeak

但是当我在 jest 测试用例中调试组件时，我得到低于输出并且无法获得应该加载的真实组件

 <ForwardRef(LoadableComponent) .../>

我的测试用例

it('should render Image component from next/Image', () => 
  await preloadAll();
  defaultProps = getDefaultProps(imgSrcFromAssetsLocation);
  const ContainerImage = shallow(<ContainerImage  ...defaultProps  />);
  console.log(ContainerImage.debug());
  expect(ContainerImage.prop('layout')).toEqual('responsive');
);

【参考方案1】：

一段时间后，我发现我们需要使用 waitFor 或类似的东西等待动态元素加载到测试用例中，“jest-next-dynamic”的文档不包括这个，我从下面的 github repo 中找到了这个 github repo with example