Skip to content

Commit

Permalink
Introduce Jest (#1347)
Browse files Browse the repository at this point in the history
* dev-deps: jest, jscodeshift, jest-codemods
* jest configuration
* Example jest test
* Remove mocha and istanbul in favour of jest
  • Loading branch information
langpavel authored Jul 3, 2017
1 parent 97e0202 commit beee4e4
Show file tree
Hide file tree
Showing 6 changed files with 1,666 additions and 328 deletions.
87 changes: 87 additions & 0 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
module.exports = {
// Modules can be explicitly auto-mocked using jest.mock(moduleName).
// https://facebook.github.io/jest/docs/en/configuration.html#automock-boolean
automock: false, // [boolean]

// Respect Browserify's "browser" field in package.json when resolving modules.
// https://facebook.github.io/jest/docs/en/configuration.html#browser-boolean
browser: false, // [boolean]

// This config option can be used here to have Jest stop running tests after the first failure.
// https://facebook.github.io/jest/docs/en/configuration.html#bail-boolean
bail: false, // [boolean]

// The directory where Jest should store its cached dependency information.
// https://facebook.github.io/jest/docs/en/configuration.html#cachedirectory-string
// cacheDirectory: '/tmp/<path>', // [string]

// Indicates whether the coverage information should be collected while executing the test.
// Because this retrofits all executed files with coverage collection statements,
// it may significantly slow down your tests.
// https://facebook.github.io/jest/docs/en/configuration.html#collectcoverage-boolean
// collectCoverage: false, // [boolean]

// https://facebook.github.io/jest/docs/en/configuration.html#collectcoveragefrom-array
collectCoverageFrom: ['src/**/*.{js,jsx}', '!**/node_modules/**', '!**/vendor/**'],

// https://facebook.github.io/jest/docs/en/configuration.html#coveragedirectory-string
coverageDirectory: '<rootDir>/coverage', // [string]

// coveragePathIgnorePatterns: // [array<string>]
// coverageReporters: [], // [array<string>]
// coverageThreshold: {}, // [object]

globals: {
__DEV__: true,
},

// https://facebook.github.io/jest/docs/en/configuration.html#mapcoverage-boolean
// mapCoverage: false, // [boolean]

// The default extensions Jest will look for.
// https://facebook.github.io/jest/docs/en/configuration.html#modulefileextensions-array-string
moduleFileExtensions: ['js', 'json', 'jsx', 'node'],

// moduleDirectories: // [array<string>]

// A map from regular expressions to module names that allow to stub out resources,
// like images or styles with a single module.
moduleNameMapper: {
'\\.(css|less|scss|sss)$': 'identity-obj-proxy',
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'GlobalImageStub',
},

// modulePathIgnorePatterns: // [array<string>]
// modulePaths: // [array<string>]
// notify: false, // [boolean]
// preset: // [string]
// projects: // [array<string>]
// clearMocks: // [boolean]
// reporters: // [array<moduleName | [moduleName, options]>]
// resetMocks: // [boolean]
// resetModules: // [boolean]
// resolver: // [string]
// rootDir: // [string]
// roots: // [array<string>]
// setupFiles: // [array]
// setupTestFrameworkScriptFile: // [string]
// snapshotSerializers: // [array<string>]
// testEnvironment: // [string]
// testMatch: // [array<string>]
// testPathIgnorePatterns: // [array<string>]
// testRegex: // [string]
// testResultsProcessor: // [string]
// testRunner: // [string]
// testURL: // [string]
// timers: // [string]

transform: {
'\\.jsx?$': 'babel-jest',
'\\.(jpe?g|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/jest/fileTransformer.js',
},

// transformIgnorePatterns: // [array<string>]
// unmockedModulePathPatterns: // [array<string>]

verbose: true, // [boolean]
};
7 changes: 7 additions & 0 deletions jest/fileTransformer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
const path = require('path');

module.exports = {
process(src, filename) {
return `module.exports = ${JSON.stringify(path.basename(filename))};`;
},
};
20 changes: 10 additions & 10 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,8 @@
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-eslint": "^7.2.3",
"babel-jest": "^20.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-istanbul": "^4.1.4",
"babel-plugin-rewire": "^1.1.0",
"babel-preset-env": "^1.5.2",
"babel-preset-react": "^6.24.1",
Expand All @@ -59,7 +59,6 @@
"babel-template": "^6.25.0",
"babel-types": "^6.25.0",
"browser-sync": "^2.18.12",
"chai": "^4.0.2",
"chokidar": "^1.7.0",
"cross-env": "^5.0.1",
"css-loader": "^0.28.4",
Expand All @@ -77,12 +76,14 @@
"front-matter": "^2.1.2",
"glob": "^7.1.2",
"husky": "^0.14.1",
"identity-obj-proxy": "^3.0.0",
"jest": "^20.0.4",
"jest-codemods": "^0.10.1",
"jscodeshift": "^0.3.32",
"lint-staged": "^4.0.0",
"markdown-it": "^8.3.1",
"mkdirp": "^0.5.1",
"mocha": "^3.4.2",
"null-loader": "^0.1.1",
"nyc": "^11.0.3",
"opn-cli": "^3.1.0",
"pixrem": "^3.0.2",
"pleeease-filters": "^4.0.0",
Expand All @@ -105,7 +106,7 @@
"react-deep-force-update": "^2.0.1",
"react-error-overlay": "^1.0.9",
"react-hot-loader": "^3.0.0-beta.7",
"react-test-renderer": "^15.5.4",
"react-test-renderer": "^15.6.1",
"rimraf": "^2.6.1",
"sinon": "^2.3.5",
"stylelint": "^7.12.0",
Expand Down Expand Up @@ -135,7 +136,6 @@
"env": {
"test": {
"plugins": [
"istanbul",
"rewire"
]
}
Expand Down Expand Up @@ -166,10 +166,10 @@
"fix-js": "yarn run lint-js -- --fix",
"fix-css": "yarn run lint-css -- --fix",
"fix": "yarn run fix-js && yarn run fix-css",
"test": "mocha",
"test-watch": "yarn run test -- --reporter min --watch",
"test-cover": "cross-env NODE_ENV=test nyc npm run test",
"coverage": "yarn run test-cover && nyc report --reporter=html && opn coverage/index.html",
"test": "jest",
"test-watch": "yarn run test -- --watch --notify",
"test-cover": "yarn run test -- --coverage",
"coverage": "yarn run test-cover && opn coverage/lcov-report/index.html",
"clean": "babel-node tools/run clean",
"copy": "babel-node tools/run copy",
"bundle": "babel-node tools/run bundle",
Expand Down
12 changes: 6 additions & 6 deletions src/components/Layout/Layout.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,26 +7,26 @@
* LICENSE.txt file in the root directory of this source tree.
*/

/* eslint-env mocha */
/* eslint-env jest */
/* eslint-disable padded-blocks, no-unused-expressions */

import React from 'react';
import { expect } from 'chai';
import { render } from 'enzyme';
import renderer from 'react-test-renderer';
import App from '../App';
import Layout from './Layout';

describe('Layout', () => {

it('renders children correctly', () => {
const wrapper = render(
const wrapper = renderer.create(
<App context={{ insertCss: () => {} }}>
<Layout>
<div className="child" />
</Layout>
</App>,
);
expect(wrapper.find('div.child').length).to.eq(1);
).toJSON();

expect(wrapper).toMatchSnapshot();
});

});
178 changes: 178 additions & 0 deletions src/components/Layout/__snapshots__/Layout.test.js.snap
Original file line number Diff line number Diff line change
@@ -0,0 +1,178 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Layout renders children correctly 1`] = `
<div>
<div
className="root"
>
<div
className="container"
>
<div
className="root"
role="navigation"
>
<a
className="link"
href="/about"
onClick={[Function]}
>
About
</a>
<a
className="link"
href="/contact"
onClick={[Function]}
>
Contact
</a>
<span
className="spacer"
>
|
</span>
<a
className="link"
href="/login"
onClick={[Function]}
>
Log in
</a>
<span
className="spacer"
>
or
</span>
<a
className="link highlight"
href="/register"
onClick={[Function]}
>
Sign up
</a>
</div>
<a
className="brand"
href="/"
onClick={[Function]}
>
<img
alt="React"
height="38"
src="logo-small.png"
srcSet="[email protected] 2x"
width="38"
/>
<span
className="brandTxt"
>
Your Company
</span>
</a>
<div
className="banner"
>
<h1
className="bannerTitle"
>
React
</h1>
<p
className="bannerDesc"
>
Complex web apps made easy
</p>
</div>
</div>
</div>
<div
className="child"
/>
<div
className="root"
>
<div
className="container"
>
<a
className="link"
href="https://gitter.im/kriasoft/react-starter-kit"
>
Ask a question
</a>
<span
className="spacer"
>
|
</span>
<a
className="link"
href="https://github.com/kriasoft/react-starter-kit/issues/new"
>
Report an issue
</a>
</div>
</div>
<div
className="root"
>
<div
className="container"
>
<span
className="text"
>
© Your Company
</span>
<span
className="spacer"
>
·
</span>
<a
className="link"
href="/"
onClick={[Function]}
>
Home
</a>
<span
className="spacer"
>
·
</span>
<a
className="link"
href="/admin"
onClick={[Function]}
>
Admin
</a>
<span
className="spacer"
>
·
</span>
<a
className="link"
href="/privacy"
onClick={[Function]}
>
Privacy
</a>
<span
className="spacer"
>
·
</span>
<a
className="link"
href="/not-found"
onClick={[Function]}
>
Not Found
</a>
</div>
</div>
</div>
`;
Loading

0 comments on commit beee4e4

Please sign in to comment.