Adding Jest

This commit is contained in:
Jeff Avallone 2018-02-10 18:30:07 -05:00
parent 916b38c6c5
commit 3e729b2a34
8 changed files with 923 additions and 40 deletions

View File

@ -2,7 +2,8 @@ module.exports = {
'env': { 'env': {
'browser': true, 'browser': true,
'es6': true, 'es6': true,
'node': true 'node': true,
'jest/globals': true
}, },
'extends': [ 'extends': [
'eslint:recommended', 'eslint:recommended',
@ -16,7 +17,8 @@ module.exports = {
'sourceType': 'module' 'sourceType': 'module'
}, },
'plugins': [ 'plugins': [
'react' 'react',
'jest'
], ],
'rules': { 'rules': {
'indent': [ 'indent': [

View File

@ -14,9 +14,16 @@
"start:prod": "run-s build start:http-server", "start:prod": "run-s build start:http-server",
"start:http-server": "http-server ./build", "start:http-server": "http-server ./build",
"build": "webpack --config webpack.prod.js", "build": "webpack --config webpack.prod.js",
"test": "jest",
"test:lint": "eslint .", "test:lint": "eslint .",
"precommit": "run-s test:lint" "precommit": "run-s test:lint"
}, },
"jest": {
"moduleNameMapper": {
"\\.svg$": "<rootDir>/src/__mocks__/svgMock.js",
"\\.css$": "<rootDir>/src/__mocks__/styleMock.js"
}
},
"dependencies": { "dependencies": {
"autoprefixer": "^7.2.5", "autoprefixer": "^7.2.5",
"babel-core": "^6.26.0", "babel-core": "^6.26.0",
@ -42,11 +49,15 @@
"workbox-webpack-plugin": "^2.1.2" "workbox-webpack-plugin": "^2.1.2"
}, },
"devDependencies": { "devDependencies": {
"babel-jest": "^22.2.2",
"eslint": "^4.17.0", "eslint": "^4.17.0",
"eslint-plugin-jest": "^21.8.0",
"eslint-plugin-react": "^7.6.1", "eslint-plugin-react": "^7.6.1",
"http-server": "^0.11.1", "http-server": "^0.11.1",
"husky": "^0.14.3", "husky": "^0.14.3",
"jest": "^22.2.2",
"npm-run-all": "^4.1.2", "npm-run-all": "^4.1.2",
"react-test-renderer": "^16.2.0",
"webpack-dev-server": "^2.11.1" "webpack-dev-server": "^2.11.1"
} }
} }

View File

@ -0,0 +1 @@
module.exports = {};

1
src/__mocks__/svgMock.js Normal file
View File

@ -0,0 +1 @@
module.exports = () => 'mock SVG';

View File

@ -0,0 +1,29 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Message rendering 1`] = `
<div
className={undefined}
>
<h2>
Testing
</h2>
<p>
Message content
</p>
</div>
`;
exports[`Message rendering with icon 1`] = `
<div
className={undefined}
>
<h2>
Sample icon SVG
Testing
</h2>
<p>
Message content
</p>
</div>
`;

View File

@ -12,7 +12,10 @@ const Message = ({ icon, heading, children }) => {
}; };
Message.propTypes = { Message.propTypes = {
icon: PropTypes.element, icon: PropTypes.oneOfType([
PropTypes.element,
PropTypes.func
]),
heading: PropTypes.string.isRequired, heading: PropTypes.string.isRequired,
children: PropTypes.element.isRequired children: PropTypes.element.isRequired
}; };

View File

@ -0,0 +1,25 @@
import React from 'react';
import renderer from 'react-test-renderer';
import Message from './index';
test('Message rendering', () => {
const component = renderer.create(
<Message heading="Testing">
<p>Message content</p>
</Message>
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
test('Message rendering with icon', () => {
const Icon = () => 'Sample icon SVG';
const component = renderer.create(
<Message heading="Testing" icon={ Icon }>
<p>Message content</p>
</Message>
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
});

885
yarn.lock

File diff suppressed because it is too large Load Diff