chore(extension): switch to Jest (#679)

* Start converting to jest

* Use toMatch

* Finish

* Remove commented out code

* Remove @babel/register

extension/.eslintignore

@@ -3,6 +3,5 @@ build
 dev
 webpack/replace
 examples
-test/app/setup.js
 npm-package
 _book

extension/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  setupFiles: ['<rootDir>/test/setup.js'],
+};

extension/package.json

@@ -18,9 +18,9 @@
     "docs:publish": "npm run docs:clean && npm run docs:build && cd _book && git init && git commit --allow-empty -m 'update book' && git checkout -b gh-pages && touch .nojekyll && git add . && git commit -am 'update book' && git push git@github.com:zalmoxisus/redux-devtools-extension gh-pages --force",
     "clean": "rimraf build/ && rimraf dev/",
     "lint": "eslint .",
-    "test:app": "cross-env BABEL_ENV=test mocha --require test/app/setup.js test/app",
+    "test:app": "cross-env BABEL_ENV=test jest test/app",
-    "test:chrome": "mocha --require test/chrome/setup.js test/chrome",
+    "test:chrome": "jest test/chrome",
-    "test:electron": "mocha --require test/electron/setup.js test/electron && rimraf test/electron/tmp",
+    "test:electron": "jest test/electron && rimraf test/electron/tmp",
     "test": "npm run test:app && npm run build:extension && npm run test:chrome && npm run test:electron"
   },
   "repository": {
@@ -38,12 +38,10 @@
     "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-react": "^7.10.4",
-    "@babel/register": "^7.12.1",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "bestzip": "^2.1.7",
     "chromedriver": "^2.35.0",
-    "co-mocha": "^1.1.3",
     "copy-webpack-plugin": "^6.3.1",
     "cross-env": "^1.0.8",
     "electron": "^2.0.2",
@@ -51,11 +49,9 @@
     "eslint": "^7.6.0",
     "eslint-config-airbnb": "^0.1.0",
     "eslint-plugin-react": "^3.2.3",
-    "expect": "^1.20.1",
     "file-loader": "^6.2.0",
     "gitbook-cli": "^2.3.0",
-    "jsdom": "^9.8.3",
+    "jest": "^26.2.2",
-    "mocha": "^3.1.2",
     "pug-html-loader": "^1.1.5",
     "raw-loader": "^0.5.1",
     "react-addons-test-utils": "^15.4.1",

extension/test/app/containers/App.spec.js

@@ -1,4 +1,3 @@
-import expect from 'expect';
 import React from 'react';
 import { mount } from 'enzyme';
 import { Provider } from 'react-redux';
@@ -14,7 +13,7 @@ const component = mount(
 
 describe('App container', () => {
   it("should render inspector monitor's component", () => {
-    expect(component.find('DevtoolsInspector').html()).toExist();
+    expect(component.find('DevtoolsInspector').html()).toBeDefined();
   });
 
   it('should contain an empty action list', () => {

extension/test/app/inject/api.spec.js

@@ -1,17 +1,16 @@
-import expect from 'expect';
 import { insertScript, listenMessage } from '../../utils/inject';
 import '../../../src/browser/extension/inject/pageScript';
 
 describe('API', () => {
   it('should get window.__REDUX_DEVTOOLS_EXTENSION__ function', () => {
-    expect(window.__REDUX_DEVTOOLS_EXTENSION__).toBeA('function');
+    expect(typeof window.__REDUX_DEVTOOLS_EXTENSION__).toBe('function');
   });
 
   it('should notify error', () => {
-    const spy = expect.createSpy(() => {});
+    const mockFunc = jest.fn(() => {});
-    window.__REDUX_DEVTOOLS_EXTENSION__.notifyErrors(spy);
+    window.__REDUX_DEVTOOLS_EXTENSION__.notifyErrors(mockFunc);
     insertScript('hi()');
-    expect(spy).toHaveBeenCalled();
+    expect(mockFunc.mock.calls.length).toBeGreaterThan(0);
   });
 
   it('should open monitor', async () => {
@@ -38,7 +37,7 @@ describe('API', () => {
     let message = await listenMessage(() => {
       window.__REDUX_DEVTOOLS_EXTENSION__.send('hi');
     });
-    expect(message).toInclude({
+    expect(message).toMatchObject({
       type: 'ACTION',
       payload: undefined,
       instanceId: 1,
@@ -54,7 +53,7 @@ describe('API', () => {
         1
       );
     });
-    expect(message).toInclude({
+    expect(message).toMatchObject({
       type: 'ACTION',
       payload: '{"counter":1}',
       instanceId: 1,
@@ -70,7 +69,7 @@ describe('API', () => {
         1
       );
     });
-    expect(message).toInclude({
+    expect(message).toMatchObject({
       type: 'ACTION',
       payload: '{"counter":1}',
       instanceId: 1,

extension/test/app/inject/enhancer.spec.js

@@ -1,5 +1,4 @@
 import '@babel/polyfill';
-import expect from 'expect';
 import { createStore, compose } from 'redux';
 import { insertScript, listenMessage } from '../../utils/inject';
 import '../../../src/browser/extension/inject/pageScript';
@@ -22,7 +21,7 @@ describe('Redux enhancer', () => {
         counter,
         window.__REDUX_DEVTOOLS_EXTENSION__()
       );
-      expect(window.store).toBeA('object');
+      expect(typeof window.store).toBe('object');
     });
     expect(message.type).toBe('INIT_INSTANCE');
     expect(window.store.getState()).toBe(0);
@@ -37,8 +36,8 @@ describe('Redux enhancer', () => {
 
     message = await listenMessage();
     expect(message.type).toBe('STATE');
-    expect(message.actionsById).toInclude(
+    expect(message.actionsById).toMatch(
-      '{"0":{"type":"PERFORM_ACTION","action":{"type":"@@INIT"},"'
+      /{"0":{"type":"PERFORM_ACTION","action":{"type":"@@INIT"},"/
     );
     expect(message.computedStates).toBe('[{"state":0}]');
   });
@@ -49,8 +48,8 @@ describe('Redux enhancer', () => {
       expect(window.store.getState()).toBe(1);
     });
     expect(message.type).toBe('ACTION');
-    expect(message.action).toInclude(
+    expect(message.action).toMatch(
-      '{"type":"PERFORM_ACTION","action":{"type":"INCREMENT"},'
+      /{"type":"PERFORM_ACTION","action":{"type":"INCREMENT"},/
     );
     expect(message.payload).toBe('1');
 
@@ -59,8 +58,8 @@ describe('Redux enhancer', () => {
       expect(window.store.getState()).toBe(2);
     });
     expect(message.type).toBe('ACTION');
-    expect(message.action).toInclude(
+    expect(message.action).toMatch(
-      '{"type":"PERFORM_ACTION","action":{"type":"INCREMENT"},'
+      /{"type":"PERFORM_ACTION","action":{"type":"INCREMENT"},/
     );
     expect(message.payload).toBe('2');
   });
@@ -80,8 +79,8 @@ describe('Redux enhancer', () => {
 
     message = await listenMessage();
     expect(message.type).toBe('ACTION');
-    expect(message.action).toInclude(
+    expect(message.action).toMatch(
-      '{"type":"PERFORM_ACTION","action":{"type":"INCREMENT"},'
+      /{"type":"PERFORM_ACTION","action":{"type":"INCREMENT"},/
     );
     expect(message.payload).toBe('3');
   });
@@ -187,7 +186,7 @@ describe('Redux enhancer', () => {
           serializeState: (key, value) => value,
         })
       );
-      expect(window.store).toBeA('object');
+      expect(typeof window.store).toBe('object');
     });
     expect(message.type).toBe('INIT_INSTANCE');
   });
@@ -197,7 +196,7 @@ describe('Redux enhancer', () => {
       window.store = window.__REDUX_DEVTOOLS_EXTENSION__()(createStore)(
         counter
       );
-      expect(window.store).toBeA('object');
+      expect(typeof window.store).toBe('object');
     });
     expect(message.type).toBe('INIT_INSTANCE');
   });
@@ -210,7 +209,7 @@ describe('Redux enhancer', () => {
         counter,
         compose(testEnhancer, window.__REDUX_DEVTOOLS_EXTENSION__())
       );
-      expect(window.store).toBeA('object');
+      expect(typeof window.store).toBe('object');
     });
     expect(message.type).toBe('INIT_INSTANCE');
   });

extension/test/app/setup.js

@@ -1,31 +0,0 @@
-require('@babel/register')();
-require('@babel/polyfill');
-global.chrome = require('sinon-chrome');
-var jsdom = require('jsdom').jsdom;
-
-var exposedProperties = ['window', 'navigator', 'document'];
-
-global.document = jsdom('');
-global.window = document.defaultView;
-Object.keys(document.defaultView).forEach((property) => {
-  if (typeof global[property] === 'undefined') {
-    exposedProperties.push(property);
-    global[property] = document.defaultView[property];
-  }
-});
-
-global.navigator = {
-  userAgent: 'gecko',
-};
-
-global.document.createRange = function () {
-  return {
-    setEnd: function () {},
-    setStart: function () {},
-    getBoundingClientRect: function () {
-      return { right: 0 };
-    },
-  };
-};
-
-documentRef = document;

extension/test/chrome/extension.spec.js

@@ -1,6 +1,5 @@
 import { resolve } from 'path';
 import webdriver from 'selenium-webdriver';
-import expect from 'expect';
 import chromedriver from 'chromedriver';
 import { switchMonitorTests, delay } from '../utils/e2e';
 
@@ -10,9 +9,7 @@ const extensionId = 'lmhkpmbekcpmknklioeibfkpmmfibljd';
 const actionsPattern = /^@@INIT(.|\n)+@@reduxReactRouter\/routerDidChange(.|\n)+@@reduxReactRouter\/initRoutes(.|\n)+$/;
 
 describe('Chrome extension', function () {
-  this.timeout(20000);
+  beforeAll(async () => {
-
-  before(async () => {
     chromedriver.start();
     await delay(2000);
     this.driver = new webdriver.Builder()
@@ -25,7 +22,7 @@ describe('Chrome extension', function () {
       .forBrowser('chrome')
       .build();
   });
-  after(async () => {
+  afterAll(async () => {
     await this.driver.quit();
     chromedriver.stop();
   });
@@ -42,10 +39,10 @@ describe('Chrome extension', function () {
   });
 
   it("should contain inspector monitor's component", async () => {
-    const val = this.driver
+    const val = await this.driver
       .findElement(webdriver.By.xpath('//div[contains(@class, "inspector-")]'))
       .getText();
-    expect(val).toExist();
+    expect(val).toBeDefined();
   });
 
   it('should contain an empty actions list', async () => {

extension/test/chrome/setup.js

@@ -1,2 +0,0 @@
-require('@babel/register')();
-require('@babel/polyfill');

extension/test/electron/devpanel.spec.js

@@ -1,7 +1,6 @@
 import { join } from 'path';
 import webdriver from 'selenium-webdriver';
 import electronPath from 'electron';
-import expect from 'expect';
 import chromedriver from 'chromedriver';
 import { switchMonitorTests, delay } from '../utils/e2e';
 
@@ -9,9 +8,7 @@ const port = 9515;
 const devPanelPath = 'chrome-extension://redux-devtools/devpanel.html';
 
 describe('DevTools panel for Electron', function () {
-  this.timeout(10000);
+  beforeAll(async () => {
-
-  before(async () => {
     chromedriver.start();
     await delay(1000);
     this.driver = new webdriver.Builder()
@@ -27,7 +24,7 @@ describe('DevTools panel for Electron', function () {
     await this.driver.manage().timeouts().setScriptTimeout(10000);
   });
 
-  after(async () => {
+  afterAll(async () => {
     await this.driver.quit();
     chromedriver.stop();
   });
@@ -62,7 +59,7 @@ describe('DevTools panel for Electron', function () {
     const className = await this.driver
       .findElement(webdriver.By.className(id))
       .getAttribute('class');
-    expect(className).toNotMatch(/hidden/); // not hidden
+    expect(className).not.toMatch(/hidden/); // not hidden
   });
 
   it('should have Redux DevTools UI on current tab', async () => {
@@ -92,7 +89,7 @@ describe('DevTools panel for Electron', function () {
     const val = await this.driver
       .findElement(webdriver.By.xpath('//div[contains(@class, "inspector-")]'))
       .getText();
-    expect(val).toExist();
+    expect(val).toBeDefined();
   });
 
   Object.keys(switchMonitorTests).forEach((description) =>

extension/test/electron/setup.js

@@ -1,2 +0,0 @@
-require('@babel/register')();
-require('@babel/polyfill');

extension/test/perf/send.spec.js

@@ -1,5 +1,4 @@
 import '@babel/polyfill';
-import expect from 'expect';
 import { bigArray, bigString, circularData } from './data';
 import { listenMessage } from '../utils/inject';
 import '../../src/browser/extension/inject/pageScript';

extension/test/setup.js

@@ -0,0 +1,2 @@
+require('@babel/polyfill');
+global.chrome = require('sinon-chrome');