Fix Jest example app (#458)

* Add a working JEST example app.

* Add README.md

* Move react-test-renderer to devDeps.

* Add a newline to the .babelrc

examples/with-jest/.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["next/babel"]
+}

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.

examples/with-jest/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,7 @@
+exports[`With Snapshot Testing App shows "Hello world!" 1`] = `
+<div>
+  <p>
+    Hello World!
+  </p>
+</div>
+`;

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!"', () => {
+describe('With Enzyme', () => {
-  const app = shallow(
+  it('App shows "Hello world!"', () => {
-    <App />
+    const app = shallow(
-  )
+      <App />
+    )
 
-  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(<App />)
+    const tree = component.toJSON()
+    expect(tree).toMatchSnapshot()
+  })
 })

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"
+    "react-dom": "^15.3.2",
-  },
+    "react-test-renderer": "^15.4.1"
-  "babel": {
-    "presets": [
-      "es2015",
-      "react"
-    ]
   }
 }

examples/with-jest/pages/index.js

@@ -1,5 +1,5 @@
 export default () => (
   <div>
-    <p>Hello world!</p>
+    <p>Hello World!</p>
   </div>
 )

examples/with-jest/readme.md

@@ -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`