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

【问题标题】：Jest testing dynamic import with jest-next-dynamic使用 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');
});

【问题讨论】：

标签： javascript reactjs jestjs next.js enzyme

【解决方案1】：

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

【讨论】：