setup working karma jasmine enzyme test toolchain for our react app

ifmeorg · Sep 1, 2017 · 8d443c0 · 8d443c0
1 parent 4d4db4d
commit 8d443c0
Show file tree

Hide file tree

Showing 12 changed files with 968 additions and 938 deletions.
diff --git a/client/.babelrc b/client/.babelrc
@@ -1,5 +1,5 @@
 {
-  "presets": ["es2015", "stage-2", "react"],
+  "presets": ["flow", "es2015", "stage-2", "react"],
   "env": {
     "test": {
       "plugins": ["transform-es2015-modules-commonjs"]

diff --git a/client/.flowconfig b/client/.flowconfig
@@ -0,0 +1,9 @@
+[ignore]
+
+[include]
+
+[libs]
+
+[lints]
+
+[options]
diff --git a/client/app/bundles/HelloWorld/components/Chart.jsx b/client/app/bundles/HelloWorld/components/Chart.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { AreaChart } from 'react-chartkick';
-import "chartjs";
+import 'chartjs';
 
 // const request = require('superagent');
 
@@ -24,18 +24,9 @@ export default class Chart extends React.Component {
     }
 
     componentDidMount() {
-        console.log('COMPONENT DID MOUNT');
-        // request
-        //     .get('/moments/analytics')
-        //     .end(function(err, res){
-        //         if (err === null && res) {
-        //             console.log('it works!')
-        //             this.setState({ data: res })
-        //         }
-        //     });
+
     }
 
-
     updateName = (name) => {
         this.setState({ name });
     };

diff --git a/client/app/bundles/HelloWorld/components/HelloWorld.jsx b/client/app/bundles/HelloWorld/components/HelloWorld.jsx
diff --git a/client/app/bundles/HelloWorld/components/__test__/Chart.test.jsx b/client/app/bundles/HelloWorld/components/__test__/Chart.test.jsx
diff --git a/client/app/bundles/HelloWorld/components/__test__/HelloWorld.test.jsx b/client/app/bundles/HelloWorld/components/__test__/HelloWorld.test.jsx
diff --git a/client/app/bundles/HelloWorld/components/__test__/__snapshots__/HelloWorld.test.jsx.snap b/client/app/bundles/HelloWorld/components/__test__/__snapshots__/HelloWorld.test.jsx.snap
diff --git a/client/app/bundles/HelloWorld/components/__tests__/Chart.spec.jsx b/client/app/bundles/HelloWorld/components/__tests__/Chart.spec.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import Chart from '../Chart';
+import { render } from 'enzyme';
+
+describe('Chart', () => {
+    it("renders a Chart", () => {
+        expect(() => {
+            render(<Chart />);
+        }).not.toThrow();
+    });
+});
diff --git a/client/app/bundles/HelloWorld/startup/registration.jsx b/client/app/bundles/HelloWorld/startup/registration.jsx
@@ -1,10 +1,8 @@
 import ReactOnRails from 'react-on-rails';
 
-import HelloWorld from '../components/HelloWorld';
 import Chart from '../components/Chart';
 
 // This is how react_on_rails can see the HelloWorld in the browser.
 ReactOnRails.register({
-    HelloWorld,
-    Chart
+    Chart,
 });
diff --git a/client/karma.conf.js b/client/karma.conf.js
@@ -0,0 +1,38 @@
+// karma.conf.js
+var webpackConfig = require('./webpack.config');
+const webpack = require('webpack');
+
+webpackConfig.plugins = [
+    new webpack.EnvironmentPlugin({
+        NODE_ENV: 'development', // use 'development' unless process.env.NODE_ENV is defined
+        DEBUG: false,
+    }),
+];
+webpackConfig.devtool = 'eval-source-map';
+
+// https://github.com/airbnb/enzyme/blob/master/docs/guides/webpack.md#react-15-compatibility
+webpackConfig.externals = {
+    'react/addons': true,
+    'react/lib/ExecutionEnvironment': true,
+    'react/lib/ReactContext': true,
+    'react-addons-test-utils': 'react-dom',
+};
+
+module.exports = function (config) {
+    config.set({
+        browsers: ['PhantomJS'],
+        singleRun: true,
+        frameworks: ['jasmine'],
+        files: [
+            { pattern: 'app/**/*.spec.jsx', watched: true },
+        ],
+        preprocessors: {
+            'app/**/*.jsx': ['webpack', 'sourcemap']
+        },
+        reporters: ['dots'],
+        webpack: webpackConfig,
+        webpackServer: {
+            noInfo: true
+        }
+    });
+};
diff --git a/client/package.json b/client/package.json
@@ -2,7 +2,8 @@
   "name": "ifme",
   "private": true,
   "scripts": {
-    "test": "jest",
+    "test": "karma start",
+    "test:watch": "karma start --no-single-run",
     "build:test": "NODE_ENV=test webpack --config webpack.config.js",
     "build:production": "NODE_ENV=production webpack --config webpack.config.js",
     "build:development": "NODE_ENV=development webpack -w --config webpack.config.js"
@@ -31,13 +32,23 @@
     "react-chartkick": "^0.1.3",
     "react-dom": "^15.5.4",
     "react-on-rails": "8.0.0",
+    "redux": "^3.7.2",
     "superagent": "^3.5.2",
     "webpack": "^2.3.3",
     "webpack-manifest-plugin": "^1.1.0"
   },
   "devDependencies": {
+    "babel-preset-flow": "^6.23.0",
     "enzyme": "^2.9.1",
-    "jest": "^20.0.4",
+    "flow-bin": "^0.52.0",
+    "jasmine": "^2.7.0",
+    "jasmine-enzyme": "^3.7.0",
+    "karma": "^1.7.0",
+    "karma-jasmine": "^1.1.0",
+    "karma-phantomjs-launcher": "^1.0.4",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^2.0.4",
+    "react-addons-test-utils": "^15.6.0",
     "react-test-render": "^1.0.3",
     "react-test-renderer": "^15.6.1",
     "superagent-mock": "^3.5.0"