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`] = ` +
+

+ Hello World! +

+
+`; 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`