From e2d331dbcc521c5765a4fe29cacd4ffb345444c6 Mon Sep 17 00:00:00 2001
From: Stephen Sauceda <contact@stephensauceda.com>
Date: Sun, 16 Sep 2018 18:12:39 -0400
Subject: [PATCH] add mocha example (#5182)

Adding an example of testing with Mocha

#4767
---
 examples/with-mocha/.babelrc           | 13 +++++++
 examples/with-mocha/README.md          | 50 ++++++++++++++++++++++++++
 examples/with-mocha/mocha.setup.js     |  4 +++
 examples/with-mocha/package.json       | 23 ++++++++++++
 examples/with-mocha/pages/index.js     | 10 ++++++
 examples/with-mocha/test/index.test.js | 14 ++++++++
 examples/with-mocha/test/mocha.opts    |  2 ++
 7 files changed, 116 insertions(+)
 create mode 100644 examples/with-mocha/.babelrc
 create mode 100644 examples/with-mocha/README.md
 create mode 100644 examples/with-mocha/mocha.setup.js
 create mode 100644 examples/with-mocha/package.json
 create mode 100644 examples/with-mocha/pages/index.js
 create mode 100644 examples/with-mocha/test/index.test.js
 create mode 100644 examples/with-mocha/test/mocha.opts

diff --git a/examples/with-mocha/.babelrc b/examples/with-mocha/.babelrc
new file mode 100644
index 0000000000..a4dff5c9c9
--- /dev/null
+++ b/examples/with-mocha/.babelrc
@@ -0,0 +1,13 @@
+{
+  "env": {
+    "development": {
+      "presets": ["next/babel"]
+    },
+    "production": {
+      "presets": ["next/babel"]
+    },
+    "test": {
+      "presets": [["next/babel", { "preset-env": { "modules": "commonjs" } }]]
+    }
+  }
+}
\ No newline at end of file
diff --git a/examples/with-mocha/README.md b/examples/with-mocha/README.md
new file mode 100644
index 0000000000..6278ecf6b9
--- /dev/null
+++ b/examples/with-mocha/README.md
@@ -0,0 +1,50 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-mocha)
+
+# Example app with Mocha tests
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-mocha with-mocha-app
+# or
+yarn create next-app --example with-mocha with-mocha-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-mocha
+cd with-mocha
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+## Run Mocha tests
+
+```bash
+npm run test
+# or
+yarn test
+```
+
+## The idea behind the example
+
+This example features:
+
+* An app with Mocha tests
+
+> A very important part of this example is the `.babelrc` file which configures the `test` environment to use `babel-preset-env` and configures it to transpile modules to `commonjs`). [Learn more](https://github.com/zeit/next.js/issues/2895).
\ No newline at end of file
diff --git a/examples/with-mocha/mocha.setup.js b/examples/with-mocha/mocha.setup.js
new file mode 100644
index 0000000000..88c8c3b323
--- /dev/null
+++ b/examples/with-mocha/mocha.setup.js
@@ -0,0 +1,4 @@
+import Enzyme from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+Enzyme.configure({ adapter: new Adapter() })
diff --git a/examples/with-mocha/package.json b/examples/with-mocha/package.json
new file mode 100644
index 0000000000..ca7468bb0a
--- /dev/null
+++ b/examples/with-mocha/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "with-mocha",
+  "version": "1.0.0",
+  "scripts": {
+    "test": "NODE_ENV=test mocha",
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.5.0",
+    "react-dom": "^16.5.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.1",
+    "@babel/register": "^7.0.0",
+    "enzyme": "^3.6.0",
+    "enzyme-adapter-react-16": "^1.5.0",
+    "expect.js": "^0.3.1",
+    "mocha": "^5.2.0"
+  }
+}
diff --git a/examples/with-mocha/pages/index.js b/examples/with-mocha/pages/index.js
new file mode 100644
index 0000000000..2c38a6d265
--- /dev/null
+++ b/examples/with-mocha/pages/index.js
@@ -0,0 +1,10 @@
+export default () => (
+  <div>
+    <style jsx>{`
+      p {
+        color: red;
+      }
+    `}</style>
+    <p>Hello World!</p>
+  </div>
+)
diff --git a/examples/with-mocha/test/index.test.js b/examples/with-mocha/test/index.test.js
new file mode 100644
index 0000000000..d7359c95b8
--- /dev/null
+++ b/examples/with-mocha/test/index.test.js
@@ -0,0 +1,14 @@
+/* global describe, it */
+import { shallow } from 'enzyme'
+import React from 'react'
+import expect from 'expect.js'
+
+import App from '../pages/index.js'
+
+describe('With Enzyme', () => {
+  it('App shows "Hello world!"', () => {
+    const app = shallow(<App />)
+
+    expect(app.find('p').text()).to.equal('Hello World!')
+  })
+})
diff --git a/examples/with-mocha/test/mocha.opts b/examples/with-mocha/test/mocha.opts
new file mode 100644
index 0000000000..bb8487b0e3
--- /dev/null
+++ b/examples/with-mocha/test/mocha.opts
@@ -0,0 +1,2 @@
+--require @babel/register
+--file mocha.setup.js
\ No newline at end of file
-- 
GitLab