Skip to content

Commit

Permalink
v0.1.0
Browse files Browse the repository at this point in the history
  • Loading branch information
exogen committed Dec 10, 2018
1 parent 365c1de commit d73a536
Showing 1 changed file with 29 additions and 2 deletions.
31 changes: 29 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,47 @@
Unlike [react-loadable](https://github.com/jamiebuilds/react-loadable), the
[dynamic import](https://github.com/zeit/next.js#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).
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 tests or setup file to make sure any
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:

- [babel-plugin-dynamic-import-node](https://www.npmjs.com/package/babel-plugin-dynamic-import-node)
- [babel-plugin-transform-dynamic-import](https://www.npmjs.com/package/babel-plugin-transform-dynamic-import)

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

## Usage

```js
// 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!
```

0 comments on commit d73a536

Please sign in to comment.