diff --git a/examples/with-jest/.babelrc b/examples/with-jest/.babelrc
new file mode 100644
index 0000000000000..b709e268e8a9b
--- /dev/null
+++ b/examples/with-jest/.babelrc
@@ -0,0 +1,3 @@
+{
+ "presets": ["next/babel"]
+}
diff --git a/examples/with-jest/README.md b/examples/with-jest/README.md
new file mode 100644
index 0000000000000..c7823c1e2738b
--- /dev/null
+++ b/examples/with-jest/README.md
@@ -0,0 +1,26 @@
+# Example app using Jest to run tests
+
+This example features:
+
+* A properly configured Next.js app for Jest
+* An example test written with Jest Snapshot Testing
+* An example test written with Enzyme
+
+## How to run it
+
+```sh
+npm install
+npm run dev
+```
+
+## Jest related info
+
+After you've added `jest-cli` and `jest-babel` into your app, make sure to add the following `.babelrc` file.
+
+```json
+{
+ "presets": ["next/babel"]
+}
+```
+
+It'll ask Jest to use the babel configurations used by Next.js.
diff --git a/examples/with-jest/__tests__/__snapshots__/index.test.js.snap b/examples/with-jest/__tests__/__snapshots__/index.test.js.snap
new file mode 100644
index 0000000000000..a65e48cf8facd
--- /dev/null
+++ b/examples/with-jest/__tests__/__snapshots__/index.test.js.snap
@@ -0,0 +1,7 @@
+exports[`With Snapshot Testing App shows "Hello world!" 1`] = `
+
+`;
diff --git a/examples/with-jest/__tests__/index.test.js b/examples/with-jest/__tests__/index.test.js
index f6f79b4e79327..1731d8a6ddbf5 100644
--- a/examples/with-jest/__tests__/index.test.js
+++ b/examples/with-jest/__tests__/index.test.js
@@ -1,12 +1,24 @@
-/* global it, expect */
+/* global it, expect, describe */
+
import React from 'react'
import { shallow } from 'enzyme'
+import renderer from 'react-test-renderer'
import App from '../pages/index.js'
-it('App shows "Hello world!"', () => {
- const app = shallow(
-
- )
+describe('With Enzyme', () => {
+ it('App shows "Hello world!"', () => {
+ const app = shallow(
+
+ )
+
+ expect(app.find('p').text()).toEqual('Hello World!')
+ })
+})
- expect(app.find('p').text()).toEqual('Hello world!')
+describe('With Snapshot Testing', () => {
+ it('App shows "Hello world!"', () => {
+ const component = renderer.create()
+ const tree = component.toJSON()
+ expect(tree).toMatchSnapshot()
+ })
})
diff --git a/examples/with-jest/package.json b/examples/with-jest/package.json
index 97e66213ac3df..805b3b38b2f5f 100644
--- a/examples/with-jest/package.json
+++ b/examples/with-jest/package.json
@@ -1,7 +1,7 @@
{
"name": "my-app",
"dependencies": {
- "next": "^1.0.0"
+ "next": "^2.0.0-beta"
},
"scripts": {
"test": "jest",
@@ -10,17 +10,12 @@
"start": "next start"
},
"devDependencies": {
- "babel-jest": "^16.0.0",
+ "babel-jest": "^18.0.0",
"enzyme": "^2.5.1",
- "jest": "^16.0.2",
+ "jest-cli": "^18.0.0",
"react": "^15.3.2",
"react-addons-test-utils": "^15.3.2",
- "react-dom": "^15.3.2"
- },
- "babel": {
- "presets": [
- "es2015",
- "react"
- ]
+ "react-dom": "^15.3.2",
+ "react-test-renderer": "^15.4.1"
}
}
diff --git a/examples/with-jest/pages/index.js b/examples/with-jest/pages/index.js
index 0b9da31488878..92448923a8603 100644
--- a/examples/with-jest/pages/index.js
+++ b/examples/with-jest/pages/index.js
@@ -1,5 +1,5 @@
export default () => (
-
Hello world!
+
Hello World!
)
diff --git a/examples/with-jest/readme.md b/examples/with-jest/readme.md
deleted file mode 100644
index 6f2b2c7ed96a1..0000000000000
--- a/examples/with-jest/readme.md
+++ /dev/null
@@ -1,25 +0,0 @@
-## Add testing to your `next` app using `jest`
-
-[`jest`](https://facebook.github.io/jest/) is a testing framework for `react`. In this example we show how to use `jest` to do DOM-testing for react applications in `next`
-
-`npm install --save-dev jest babel-jest enzyme`
-
- * `jest` - The testing framework
- * `babel-jest` - Babel preprocessor for test files
- * `enzyme` - Mock render the elements
-
-Add test script to the [recommended `package.json`](https://github.com/zeit/next.js#production-deployment)
-
-__package.json__
-
-```javascript
-...
-"scripts": {
- "test": "jest",
- ...
-}
-...
-
-```
-
-`npm run test`