How to unit test Next.js dynamic components? - reactjs

Question

The Next.js dynamic() HOC components aren't really straightforward to tests. I have 2 issues right now;
First jest is failing to compile dynamic imports properly (require.resolveWeak is not a function - seems to be added by next babel plugin)
Second I can't get good coverage of the modules logic; looks like it's simply not run when trying to render a dynamic component.

Answer 1

Let's assume we have a component like this (using a dynamic import):
import dynamic from 'next/dynamic';
const ReactSelectNoSSR = dynamic(() => import('../components/select'), {
loading: () => <Input />,
ssr: false
});
export default () => (
<>
<Header />
<ReactSelectNoSSR />
<Footer />
</>
);
The dynamic import support offered by Next.js does not expose a way to preload the dynamically imported components in Jest’s environment.
However, thanks to jest-next-dynamic, we can render the full component tree instead of the loading placeholder.
You'll need to add babel-plugin-dynamic-import-node to your .babelrc like so.
{
"plugins": ["babel-plugin-dynamic-import-node"]
}
Then, you can use preloadAll() to render the component instead of the loading placeholder.
import preloadAll from 'jest-next-dynamic';
import ReactSelect from './select';
beforeAll(async () => {
await preloadAll();
});
📝 Source

Answer 2

You can add the following to your Jest setup ex: setupTests.ts
jest.mock('next/dynamic', () => () => {
const DynamicComponent = () => null;
DynamicComponent.displayName = 'LoadableComponent';
DynamicComponent.preload = jest.fn();
return DynamicComponent;
});

Answer 3

The following will load the required component.
You can also use similar approach to load all components before hand.
jest.mock('next/dynamic', () => ({
__esModule: true,
default: (...props) => {
const dynamicModule = jest.requireActual('next/dynamic');
const dynamicActualComp = dynamicModule.default;
const RequiredComponent = dynamicActualComp(props[0]);
RequiredComponent.preload
? RequiredComponent.preload()
: RequiredComponent.render.preload();
return RequiredComponent;
},
}));

Answer 4

Although a hacky solution, what I did was to simply mock next/dynamic by extracting the import path and returning that import:
jest.mock('next/dynamic', () => ({
__esModule: true,
default: (...props) => {
const matchedPath = /(.)*(\'(.*)\')(.)*/.exec(props[0].toString());
if (matchedPath) return require(matchedPath[3]);
else return () => <></>;
},
}));

Answer 5

Here is an easy fix, which:
Doesn't require any 3rd party libraries
Still renders the dynamic component (e.g. snapshots will work)
SOLUTION:
Mock the next/dynamic module, by creating a mock file in __mocks__/next/dynamic.js Jest docs
Copy and paste the following code:
const dynamic = (func) => {
const functionString = func.toString()
const modulePath = functionString.match(/"(.*?)"/)[1]
const namedExport = functionString.match(/mod\.(.+?(?=\)))/)
const componentName = namedExport ? namedExport[1] : 'default'
return require(modulePath)[componentName]
}
export default dynamic
The above code assumes that you are using the dynamic() function for default and named exports as documented in the Next.js docs. I.e.:
// default
const DynamicHeader = dynamic(() =>
import('../components/header')
)
// named export
const DynamicComponent = dynamic(() =>
import('../components/hello').then((mod) => mod.Hello)
)
That's it! Now dynamic imports should work in all your test suites :)

Answer 6

If you're having the first issue with Next8, you can mock the dynamic import with this:
jest.mock('next-server/dynamic', () => () => 'Dynamic');
For reference, see:
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