Added Jest and Enzyme with a sample test

Author: zoltantothcom

Diff for: __tests__/config/test.config.js

@@ -0,0 +1,4 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });

Diff for: __tests__/index.test.js

@@ -0,0 +1,11 @@
+/* eslint-disable */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { shallow } from 'enzyme';
+
+import Layout from '../src/Layout';
+
+it('renders without crashing', () => {
+  shallow(<Layout />);
+});

Diff for: index.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Layout from './src/Layout';
+
+const App = () => <Layout />;
+
+ReactDOM.render(<App />, document.getElementById('root'));

Diff for: package.json

@@ -12,20 +12,42 @@
     "start": "webpack-dev-server --mode development",
     "format": "prettier --write \"src/**/*.js\"",
     "stats": "webpack-bundle-analyzer stats/stats.json",
-    "build": "webpack --mode production"
+    "build": "webpack --mode production",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
+  },
+  "jest": {
+    "setupFiles": [
+      "<rootDir>__tests__/config/test.config.js"
+    ],
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ],
+    "testPathIgnorePatterns": [
+      "<rootDir>/__tests__/config/"
+    ]
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",
     "@babel/preset-env": "^7.3.1",
     "@babel/preset-react": "^7.0.0",
     "babel-eslint": "^10.0.1",
+    "babel-jest": "^24.0.0",
     "babel-loader": "^8.0.5",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
+    "enzyme": "^3.8.0",
+    "enzyme-adapter-react-16": "^1.8.0",
+    "enzyme-to-json": "^3.3.5",
     "eslint": "^5.12.1",
     "eslint-config-react": "^1.1.7",
     "eslint-loader": "^2.1.1",
     "eslint-plugin-react": "^7.12.4",
     "html-webpack-plugin": "^3.2.0",
+    "jest": "^24.0.0",
     "prettier": "1.16.2",
+    "react-test-renderer": "^16.7.0",
     "webpack": "^4.29.0",
     "webpack-bundle-analyzer": "^3.0.3",
     "webpack-cli": "^3.2.1",

Diff for: src/index.js renamed to src/Layout.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import styled from 'styled-components';
 
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
@@ -57,7 +56,7 @@ module.exports = Pattern;
 
 `;
 
-class Welcome extends React.Component {
+class Layout extends React.Component {
   render() {
     return (
       <React.Fragment>
@@ -74,4 +73,4 @@ class Welcome extends React.Component {
   }
 }
 
-ReactDOM.render(<Welcome />, document.getElementById('root'));
+export default Layout;

Diff for: webpack.config.js

@@ -3,12 +3,13 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 module.exports = {
+  mode: 'development',
   devtool: 'inline-source-map',
-  entry: './src/index.js',
+  entry: './index.js',
   output: {
     path: path.join(__dirname, '/build'),
     publicPath: '/',
-    filename: 'bundle.js'
+    filename: '[name].js'
   },
   optimization: {
     splitChunks: {
@@ -21,15 +22,15 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.(js|jsx)$/,
+        test: /\.jsx?$/,
         exclude: /node_modules/,
         use: ['babel-loader', 'eslint-loader']
       }
     ]
   },
   plugins: [
     new HtmlWebpackPlugin({
-      template: path.resolve('./index.html')
+      template: 'index.html'
     }),
     new BundleAnalyzerPlugin({
       analyzerMode: 'disabled',
@@ -38,5 +39,8 @@ module.exports = {
       statsFilename: path.join(__dirname, 'stats/stats.json')
     })
   ],
+  resolve: {
+    extensions: ['.js', '.jsx']
+  },
   performance: { hints: false }
 };