Adding Jest

.eslintrc.js

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

package.json

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

src/__mocks__/styleMock.js

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

src/__mocks__/svgMock.js

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

src/components/Message/__snapshots__/test.js.snap

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

src/components/Message/index.js

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

src/components/Message/test.js

@@ -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();
+});