Question

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

2021-10-23

3286

javascript reactjs jestjs next.js enzyme

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

TypeError: 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');
});

Answer 1

过了一段时间，我发现我们需要使用 waitFor 或类似方法等待动态元素在测试用例中加载，“jest-next-dynamic”的文档不包括这一点，我从下面的 github repo 中找到了这一点带有示例的 github repo

Answer 2

尽管模块在运行时加载良好，但我在执行 jest 测试时遇到了这个问题。

我有一个自定义包被使用为：

const MyReactComponent = dynamic(import('@mynamespace/myModule/MyReactComponent'))

我的解决方案是修改我的自定义模块导出组件的方式，从：

module.exports = MyReactComponent

到：

exports.MyReactComponent = MyReactComponent;
exports["default"] = MyReactComponent;

因为我使用 rollupJs 来构建，我可以通过简单地导出 const 和默认值来实现这一更改。从：

const MyReactComponent: React.FC<...> = ...

export default MyReactComponent;

更改为

export const MyReactComponent: React.FC<...> = ...

export default MyReactComponent;

这使我能够运行测试并执行包。我希望这对某人有帮助 :)