19

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

  • 第一个笑话是无法正确编译动态导入（require.resolveWeak is not a function- 似乎是由下一个 babel 插件添加的）
  • 其次，我无法很好地涵盖modules逻辑；看起来它在尝试渲染动态组件时根本没有运行。
4

4 回答 4

7

假设我们有一个这样的组件（使用动态导入）：

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();
});

资源

于 2019-03-31T18:53:41.950 回答
5

您可以将以下内容添加到您的 Jest 设置中：setupTests.ts

jest.mock('next/dynamic', () => () => {
    const DynamicComponent = () => null;
    DynamicComponent.displayName = 'LoadableComponent';
    DynamicComponent.preload = jest.fn();
    return DynamicComponent;
});
于 2020-10-20T08:23:21.853 回答
2

虽然是一个 hacky 解决方案，但我所做的只是next/dynamic通过提取导入路径并返回该导入来进行模拟：

jest.mock('next/dynamic', () => ({
  __esModule: true,
  default: (...props) => {
    const matchedPath = /(.)*(\'(.*)\')(.)*/.exec(props[0].toString());
    if (matchedPath) return require(matchedPath[3]);
    else return () => <></>;
  },
}));
于 2021-03-25T06:10:13.250 回答
0

如果您遇到 Next8 的第一个问题，您可以使用以下命令模拟动态导入：

jest.mock('next-server/dynamic', () => () => 'Dynamic');

供参考，请参阅：

https://spectrum.chat/next-js/general/with-jest-and-dynamic-imports-broken~25905aad-901e-41d8-ab3e-9f97eeb51610?m=MTU1MzA5MTU2NjI0Nw==

https://github.com/zeit/next.js/issues/6187#issuecomment-467134205

于 2019-03-20T14:22:57.313 回答