Originally published athttps://sergiodxa.com/articles/testing-in-next-dynamic-imports/

If you are using Next.js most probable you are also usingnext/dynamic, their alternative toReact.lazy which has support for Server-Side Rendering. An amazing feature bundled with Next.js actually.

And if you are trying to test your components,and you should, you will hit against an error because the dynamic import is not supported in your tests.

Let's see a way to solve this and test our code. Let's say we have the following component:

importdynamicfrom"next/dynamic";constLazyComponent=dynamic(()=>import("./lazy-component"));functionMyComponent(){// some logic herereturn(<div>{/* Some JSX here */}{true/* replace with real condition */&&<LazyComponent/>}</div>);}exportdefaultMyComponent;

Babel Plugin for Dynamic Imports

The first thing you will need is to configure Babel to transpile dynamic imports to something Node.js can understand, to do so we can use the pluginbabel-plugin-transform-dynamic-import.

yarn add-D babel-plugin-transform-dynamic-import

Now let's configure it in our.babelrc file

{"presets":["next/babel"],"env":{"test":{"plugins":["transform-dynamic-import"]}}}

The preset is required to don't lose the default Next.js configuration for Babel, theenv key let us define plugins or presets based on theNODE_ENV environment variable value.

In our case ifNODE_ENV is equal totest it will apply the pluginbabel-plugin-transform-dynamic-import.

Mocknext/dynamic Implementation

Now we need to mock thenext/dynamic implementation in our test, we can use thejest-next-dynamic package to achieve that.

yarn add-D jest-next-dynamic

Let's write a simple test for our component.

import{render,waitForElement}from"@testing-library/react";import"@testing-library/jest-dom/extend-expect";importMyComponentfrom"./my-component";test("MyComponent",async()=>{const{getByText}=render(<MyComponent/>);// fire some events hereconstlazyContent=awaitwaitForElement(()=>getByText(/I'm Lazy/));expect(lazyContent).toBeInTheDocument();});

In our test we are using@testing-library/react to render ourMyComponent, we wait for an element with the textI'm Lazy to appear and, thanks to@testing-library/jest-dom we expect that element to be present in the document.

Now if we run that test it should throw an error, let's fix that too.

import{render,waitForElement}from"@testing-library/react";import"@testing-library/jest-dom/extend-expect";importpreloadAllfrom"jest-next-dynamic";importMyComponentfrom"./my-component";test("MyComponent",async()=>{awaitpreloadAll();const{getByText}=render(<MyComponent/>);// fire some events hereconstlazyContent=awaitwaitForElement(()=>getByText(/I'm Lazy/));expect(lazyContent).toBeInTheDocument();});

We are now importingpreloadAll fromjest-next-dynamic and using it inside our test before everything else, this will tellnext/dynamic to preload every dynamic component, when they are all loaded we can render our component and test for theLazyComponent to be there.

Final Words

With this you could write unit and integration tests against components usingnext/dynamic without issues and be sure your application is working as supposed.