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

g6ll5ycj  于 2023-03-08  发布在  React
关注(0)|答案(2)|浏览(130)

我尝试在nextjs版本10.2.3中测试动态导入,我尝试使用jest-next-dynamic库,避免抛出错误
类型错误:需要.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');
});
izj3ouym

izj3ouym1#

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

gab6jxml

gab6jxml2#

我在执行jest测试时遇到了这个问题,尽管模块在运行时加载良好。
我有一个自定义软件包被消费为:

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

我的解决方案是修改自定义模块从以下位置导出组件的方式:

module.exports = MyReactComponent

致:

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

由于我使用rollupJs来构建,我可以通过简单地导出const和default来实现此更改。

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

export default MyReactComponent;

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

export default MyReactComponent;

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

相关问题