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

Question

我试图在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回购Github repo with example

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;

这允许我运行测试和执行包。我希望这能帮助到一些人:)