Question

Next.js dynamic() HOC组件对测试来说并不是那么简单。我现在有2个问题;

第一次开玩笑无法正确编译动态导入（require.resolveWeak is not a function - 似乎是由下一个babel插件添加的）
第二，我无法很好地报道modules逻辑;看起来它在尝试渲染动态组件时根本不运行。

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，我们可以呈现完整的组件树而不是加载占位符。

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

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

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

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

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

Source

Answer 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 () => <></>;
  },
}));

Answer 3

如果您是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

Answer 4

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

jest.mock('next/dynamic', () => () => {
    const DynamicComponent = () => null;
    DynamicComponent.displayName = 'LoadableComponent';
    DynamicComponent.preload = jest.fn();
    return DynamicComponent;
});

如何单元测试Next.js动态组件？

4 个答案: