Skip to content
Resolve Next.js dynamic import components in Jest tests
Branch: master
Clone or download
boygirl Merge pull request #5 from FormidableLabs/maintenance-status
add maintenance status badge to readme
Latest commit 8125688 Apr 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__snapshots__ v0.1.0 Dec 10, 2018
test
.babelrc.js Improve support for both Next 7 and 8 Feb 22, 2019
.gitignore v0.1.0 Dec 10, 2018
LICENSE Create LICENSE Dec 12, 2018
README.md add maintenance status badge to readme Apr 15, 2019
index.js Improve support for both Next 7 and 8 Feb 22, 2019
index.test.js v0.1.0 Dec 10, 2018
package.json
yarn.lock Remove unused Babel plugins Feb 22, 2019

README.md

Maintenance Status

jest-next-dynamic

Unlike react-loadable, the dynamic import support offered by Next.js does not expose a way to preload the dynamically imported components in Jest’s environment (which mimics a DOM environment). Even if you get a handle on the Loadable component bundled with Next.js, it skips queuing up the components in DOM-like environments. Bummer!

This module can be imported in your test or setup files to make sure any component created with next/dynamic is added to a queue, which can then be flushed with the exported preloadAll function.

Using this, your component tests (including snapshots) can render the full component tree instead of the loading placeholders.

Setup

In order to transform import() successfully in Jest’s environment, you must use a different transform than the one provided by next/babel (which expects to be built with webpack).

Both of these work fine:

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

Usage

// This will mock `next/dynamic`, so make sure to import it before any of your
// components.
import preloadAll from "jest-next-dynamic";
// This component can have dynamic imports anywhere in its rendered tree,
// including nested dynamic imports.
import SomeComponent from "./SomeComponent";

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

// Your tests here!

Maintenance Status

Experimental: This project is quite new. We're not sure what our ongoing maintenance plan for this project will be. Bug reports, feature requests and pull requests are welcome. If you like this project, let us know!

You can’t perform that action at this time.