shakacode · justin808 · Sep 1, 2018 · Aug 25, 2018 · Aug 29, 2018
diff --git a/client/.eslintrc.yml b/client/.eslintrc.yml
@@ -4,6 +4,7 @@ parser: babel-eslint
 extends: eslint-config-shakacode
 
 plugins:
+  - jest
   - react
 
 globals:
@@ -12,8 +13,8 @@ globals:
 
 env:
   browser: true
+  jest/globals: true
   node: true
-  mocha: true
 
 rules:
   import/extensions: [2, { js: "never", jsx: "never" }]

diff --git a/client/app/bundles/comments/components/CommentBox/CommentList/Comment/Comment.spec.jsx b/client/app/bundles/comments/components/CommentBox/CommentList/Comment/Comment.spec.jsx
@@ -1,4 +1,4 @@
-import { React, expect, TestUtils } from 'libs/testHelper';
+import { React, TestUtils } from 'libs/testHelper';
 
 import Comment from './Comment';
 
@@ -14,13 +14,12 @@ describe('Comment', () => {
       <Comment author="Frank" text="Hi!" />,
     );
 
-    // TODO: Setup testing of CSS Modules classNames
-    // const comment = findRenderedDOMComponentWithTag(component, 'div');
-    // expect(comment.className).to.equal('comment');
-    // const author = findRenderedDOMComponentWithTag(component, 'h2');
-    // expect(author.className).to.equal('comment-author');
+    const comment = findRenderedDOMComponentWithTag(component, 'div');
+    expect(comment.className).toEqual('comment');
+    const author = findRenderedDOMComponentWithTag(component, 'h2');
+    expect(author.className).toEqual('commentAuthor js-comment-author');
     const text = findRenderedDOMComponentWithTag(component, 'span');
-    expect(text.className).to.equal('js-comment-text');
+    expect(text.className).toEqual('js-comment-text');
   });
 
   it('shows the author', () => {
@@ -29,7 +28,7 @@ describe('Comment', () => {
     );
 
     const author = findRenderedDOMComponentWithClass(component, 'js-comment-author');
-    expect(author.textContent).to.equal('Frank');
+    expect(author.textContent).toEqual('Frank');
   });
 
   it('shows the comment text in markdown', () => {
@@ -38,6 +37,6 @@ describe('Comment', () => {
     );
 
     const comment = findRenderedDOMComponentWithClass(component, 'js-comment-text');
-    expect(comment.textContent).to.equal('Hi!\n');
+    expect(comment.textContent).toEqual('Hi!\n');
   });
 });
diff --git a/client/app/bundles/comments/components/CommentBox/CommentList/CommentList.spec.jsx b/client/app/bundles/comments/components/CommentBox/CommentList/CommentList.spec.jsx
@@ -1,4 +1,4 @@
-import { React, expect, TestUtils } from 'libs/testHelper';
+import { React, TestUtils } from 'libs/testHelper';
 import { List, Map } from 'immutable';
 
 import CommentList from './CommentList';
@@ -39,9 +39,9 @@ describe('CommentList', () => {
       />,
     );
     const list = scryRenderedComponentsWithType(component, Comment);
-    expect(list.length).to.equal(2);
-    expect(list[0].props.author).to.equal('Frank');
-    expect(list[1].props.author).to.equal('Furter');
+    expect(list.length).toEqual(2);
+    expect(list[0].props.author).toEqual('Frank');
+    expect(list[1].props.author).toEqual('Furter');
   });
 
   it('renders an alert if errors', () => {
@@ -54,6 +54,6 @@ describe('CommentList', () => {
     );
 
     const alert = findRenderedDOMComponentWithTag(component, 'strong');
-    expect(alert.textContent).to.equal('Comments could not be retrieved. ');
+    expect(alert.textContent).toEqual('Comments could not be retrieved. ');
   });
 });
diff --git a/client/app/libs/testHelper.js b/client/app/libs/testHelper.js
@@ -1,39 +1,8 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import TestUtils from 'react-dom/test-utils';
-import jsdom from 'jsdom/lib/old-api';
-import chai from 'chai';
-import chaiImmutable from 'chai-immutable';
-
-const doc = jsdom.jsdom('<!doctype html><html><body></body></html>');
-const win = doc.defaultView;
-
-global.document = doc;
-global.window = win;
-
-// from mocha-jsdom https://github.com/rstacruz/mocha-jsdom/blob/master/index.js#L80
-function propagateToGlobal(window) {
-  Object.keys(window).forEach((key) => {
-    if (key in global) return;
-    global[key] = window[key];
-  });
-}
-
-// take all properties of the window object and also attach it to the
-// mocha global object
-propagateToGlobal(win);
-
-// everything we need for our tests
-const {
-  assert, expect,
-} = chai;
-
-chai.use(chaiImmutable);
 
 export {
   React,
-  chai,
-  assert,
-  expect,
   TestUtils,
 };
diff --git a/client/app/libs/testNullCompiler.js b/client/app/libs/testNullCompiler.js
diff --git a/client/package.json b/client/package.json
@@ -26,8 +26,8 @@
   "homepage": "https://github.com/shakacode/react-webpack-rails-tutorial",
   "scripts": {
     "postinstall": "npm rebuild node-sass",
-    "test": "NODE_PATH=./app mocha --require babel-core/register --require ./app/libs/testHelper.js --require ./app/libs/testNullCompiler.js 'app/**/*.spec.@(js|jsx)'",
-    "test:debug": "yarn run test -- --debug-brk",
+    "test": "NODE_PATH=./app jest",
+    "test:debug": "NODE_PATH=./app node --inspect-brk jest --runInBand",
     "start": "babel-node server-express.js",
     "build:production:client": "NODE_ENV=production webpack -p --config webpack.client.rails.build.config.js",
     "build:production:server": "NODE_ENV=production webpack -p --config webpack.server.rails.build.config.js",
@@ -101,22 +101,35 @@
   },
   "devDependencies": {
     "babel-eslint": "^8.0.2",
+    "babel-jest": "^23.4.2",
     "body-parser": "^1.18.2",
-    "chai": "^4.1.2",
-    "chai-immutable": "^1.6.0",
     "eslint": "^4.11.0",
     "eslint-config-shakacode": "^16.0.0",
     "eslint-import-resolver-webpack": "^0.8.3",
     "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jest": "^21.22.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-react": "^7.5.1",
     "estraverse-fb": "^1.3.2",
     "express": "^4.16.2",
-    "jsdom": "^11.4.0",
-    "mocha": "^4.0.1",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^23.5.0",
     "pug": "^2.0.0-rc.4",
     "react-transform-hmr": "^1.0.4",
+    "regenerator-runtime": "^0.12.1",
     "sleep": "^5.1.1",
     "webpack-dev-server": "^2.9.4"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "\\.scss$": "identity-obj-proxy"
+    },
+    "setupFiles": [
+      "./app/libs/testHelper.js"
+    ],
+    "testRegex": "./app/.*.spec\\.jsx?$",
+    "transform": {
+      "^.+\\.jsx?$": "babel-jest"
+    }
   }
 }