v0.1.0

.babelrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  presets: ["@babel/preset-env", "@babel/preset-react"],
+  plugins: ["babel-plugin-dynamic-import-node"]
+};

.gitignore

@@ -0,0 +1,64 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# Build cache
+.cache
+
+# next.js build output
+.next

README.md

@@ -0,0 +1,22 @@
+# jest-next-dynamic
+
+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).
+
+This module can be imported in your tests or setup file to make sure any
+component created with `next/dynamic` is added to a queue, which can then be
+flushed with the exported `preloadAll` function.
+
+## Usage
+
+```js
+// This will mock `next/dynamic`, so make sure to import it before any of your
+// components.
+import preloadAll from "jest-next-dynamic";
+
+beforeAll(async () => {
+  await preloadAll();
+});
+```

__snapshots__/index.test.js.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders nested next/dynamic components 1`] = `
+<div>
+  <p>
+    Nested dynamic loaded component:
+  </p>
+  <div>
+    <p>
+      Dynamic loaded component:
+    </p>
+    <h1>
+      Leaf component says: 
+      Loaded with next/dynamic!
+    </h1>
+  </div>
+</div>
+`;

index.js

@@ -0,0 +1,25 @@
+const mockPromises = [];
+
+module.exports = function preloadAll() {
+  if (mockPromises.length) {
+    const promises = mockPromises.slice();
+    mockPromises.length = 0;
+    // While loading the components in `mockPromises`, more components may have
+    // been dynamically loaded, adding more promises we should wait for.
+    return Promise.all(promises).then(preloadAll);
+  } else {
+    return Promise.resolve();
+  }
+};
+
+jest.doMock("next/dynamic", () => {
+  const { default: dynamic } = jest.requireActual("next/dynamic");
+
+  const mockDynamic = (...args) => {
+    const LoadableComponent = dynamic(...args);
+    mockPromises.push(LoadableComponent.preload());
+    return LoadableComponent;
+  };
+
+  return mockDynamic;
+});

index.test.js

@@ -0,0 +1,12 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import preloadAll from "./index";
+import NextDynamicNested from "./test/NextDynamicNested";
+
+beforeAll(async () => {
+  await preloadAll();
+});
+
+it("renders nested next/dynamic components", () => {
+  expect(TestRenderer.create(<NextDynamicNested />).toJSON()).toMatchSnapshot();
+});

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "jest-next-dynamic",
+  "version": "0.1.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "test": "jest"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.2.0",
+    "@babel/preset-env": "^7.2.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-core": "^7.0.0-bridge",
+    "babel-jest": "^23.6.0",
+    "babel-plugin-dynamic-import-node": "^2.2.0",
+    "jest": "^23.6.0",
+    "next": "^7.0.2",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
+    "react-test-renderer": "^16.6.3"
+  }
+}

test/NextDynamic.js

@@ -0,0 +1,31 @@
+import React from "react";
+import dynamic from "next/dynamic";
+
+const LeafComponent = dynamic(
+  () =>
+    // To prevent cheating by working without waiting for `preloadAll` due to the
+    // way Jest schedules tests on the event loop, delay the promise by more than
+    // what this `import()` transform would do.
+    new Promise((resolve, reject) => {
+      setTimeout(() => {
+        import("./NextDynamicLeaf")
+          .then(component => {
+            return new Promise(resolve => {
+              setTimeout(() => {
+                resolve(component);
+              }, 500);
+            });
+          })
+          .then(resolve, reject);
+      }, 500);
+    })
+);
+
+export default function NextDynamic() {
+  return (
+    <div>
+      <p>Dynamic loaded component:</p>
+      <LeafComponent>Loaded with next/dynamic!</LeafComponent>
+    </div>
+  );
+}

test/NextDynamicLeaf.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function LeafComponent(props) {
+  return <h1>Leaf component says: {props.children}</h1>;
+}

test/NextDynamicNested.js

@@ -0,0 +1,31 @@
+import React from "react";
+import dynamic from "next/dynamic";
+
+const NextDynamic = dynamic(
+  () =>
+    // To prevent cheating by working without waiting for `preloadAll` due to the
+    // way Jest schedules tests on the event loop, delay the promise by more than
+    // what this `import()` transform would do.
+    new Promise((resolve, reject) => {
+      setTimeout(() => {
+        import("./NextDynamic")
+          .then(component => {
+            return new Promise(resolve => {
+              setTimeout(() => {
+                resolve(component);
+              }, 500);
+            });
+          })
+          .then(resolve, reject);
+      }, 500);
+    })
+);
+
+export default function NextDynamicNested() {
+  return (
+    <div>
+      <p>Nested dynamic loaded component:</p>
+      <NextDynamic />
+    </div>
+  );
+}