reactjs - 如何对 Next.js 动态组件进行单元测试？

Question

Next.js dynamic() HOC 组件并不是很容易测试。我现在有 2 个问题；

• 第一个 Jest 无法正确编译动态导入(require.resolveWeak 不是一个函数 - 似乎是由下一个 babel 插件添加的)
• 其次，我无法很好地覆盖模块逻辑；看起来它在尝试渲染动态组件时根本没有运行。

Answer 1

假设我们有一个像这样的组件(使用动态导入):

import dynamic from 'next/dynamic';

const ReactSelectNoSSR = dynamic(() => import('../components/select'), {
    loading: () => <Input />,
    ssr: false
});

export default () => (
    <>
        <Header />
        <ReactSelectNoSSR />
        <Footer />
    </>
);

Next.js 提供的动态导入支持没有公开在 Jest 环境中预加载动态导入组件的方法。不过，感谢jest-next-dynamic ，我们可以渲染完整的组件树而不是加载占位符。

您需要添加babel-plugin-dynamic-import-node像这样到你的 .babelrc 。

{
  "plugins": ["babel-plugin-dynamic-import-node"]
}

然后，您可以使用 preloadAll() 来渲染组件，而不是加载占位符。

import preloadAll from 'jest-next-dynamic';
import ReactSelect from './select';

beforeAll(async () => {
    await preloadAll();
});

<小时/>

📝 Source