Migrate from karma+mocha to jest

jest/__mocks__/intlMock.js

@@ -0,0 +1,22 @@
+/* eslint-env node */
+const path = require("path");
+const { transform } = require("../../webpack-utils/intl-loader");
+
+module.exports = {
+  /**
+   * @param {string} src - transformed module source code
+   * @param {string} filename - transformed module file path
+   * @param {{[key: string]: any}} config - jest config
+   * @param {{instrument: boolean}} options - additional options
+   *
+   * @return {string}
+   */
+  // eslint-disable-next-line no-unused-vars
+  process(src, filename, config, options) {
+    return transform(
+      src,
+      filename,
+      path.resolve(`${__dirname}/../../..`)
+    );
+  }
+};

jest/__mocks__/mockStrExport.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

jest/setupAfterEnv.js

@@ -21,8 +21,3 @@ if (!window.localStorage) {
         ...window.localStorage
     };
 }
-
-// require all modules ending in ".test.js" from the
-// current directory and all subdirectories
-const testsContext = require.context('.', true, /\.test\.jsx?$/);
-testsContext.keys().forEach(testsContext);

karma.conf.js

@@ -1,83 +0,0 @@
-/* eslint-env node */
-
-// https://docs.gitlab.com/ce/ci/variables/README.html
-// noinspection Eslint
-const isCi = typeof process.env.CI !== 'undefined';
-
-module.exports = function(config) {
-    const params = {
-        // base path that will be used to resolve all patterns (eg. files, exclude)
-        basePath: '',
-
-        // frameworks to use
-        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-        frameworks: ['mocha', 'sinon'],
-
-        // list of files / patterns to load in the browser
-        files: [
-            'dll/vendor.dll.js',
-            'src/test.js'
-        ],
-
-        // list of files to exclude
-        exclude: [
-        ],
-
-        // preprocess matching files before serving them to the browser
-        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
-        preprocessors: {
-            'src/test.js': ['webpack', 'sourcemap']
-        },
-
-        webpack: require('./webpack.config.js'),
-
-        webpackServer: {
-            noInfo: true // please don't spam the console when running in karma!
-        },
-
-        // test results reporter to use
-        // possible values: 'dots', 'progress'
-        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-        reporters: ['nyan'],
-
-        nyanReporter: {
-            // suppress the red background on errors in the error
-            // report at the end of the test run
-            suppressErrorHighlighting: true
-        },
-
-        // web server port
-        port: 9876,
-
-        // enable / disable colors in the output (reporters and logs)
-        colors: true,
-
-        // level of logging
-        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-        logLevel: config.LOG_INFO,
-
-        // enable / disable watching file and executing tests whenever any file changes
-        autoWatch: true,
-
-        // start these browsers
-        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-        browsers: ['jsdom'],
-
-        // Continuous Integration mode
-        // if true, Karma captures browsers, runs the tests and exits
-        singleRun: false
-    };
-
-    if (isCi) {
-        Object.assign(params, {
-            reporters: ['dots'],
-            autoWatch: false,
-            singleRun: true,
-            client: {
-                captureConsole: false
-            }
-        });
-    }
-
-    config.set(params);
-};

package.json

@@ -28,7 +28,7 @@
     "start": "yarn run clean && yarn run build:dll && NODE_PATH=./src webpack-dev-server --colors",
     "clean": "rm -rf ./dist && mkdir ./dist",
     "e2e": "yarn --cwd ./tests-e2e test",
-    "test": "yarn run build:dll && NODE_PATH=./src karma start ./karma.conf.js",
+    "test": "NODE_PATH=./src jest",
     "analyze": "yarn run clean && yarn run build:webpack --analyze",
     "lint": "eslint ./src",
     "flow": "flow",
@@ -42,6 +42,29 @@
     "build:dll": "node ./scripts/build-dll.js",
     "build:serve": "http-server --proxy https://dev.account.ely.by ./dist"
   },
+  "jest": {
+    "roots": [
+      "<rootDir>/src/"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/jest/setupAfterEnv.js"
+    ],
+    "resetMocks": true,
+    "resetModules": true,
+    "restoreMocks": true,
+    "watchPlugins": [
+      "jest-watch-typeahead/filename",
+      "jest-watch-typeahead/testname"
+    ],
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/jest/__mocks__/mockStrExport.js",
+      "\\.(css|less|scss)$": "identity-obj-proxy"
+    },
+    "transform": {
+      "\\.intl\\.json$": "<rootDir>/jest/__mocks__/intlMock.js",
+      "^.+\\.[tj]sx?$": "babel-jest"
+    }
+  },
   "dependencies": {
     "@formatjs/intl-pluralrules": "^1.3.7",
     "@formatjs/intl-relativetimeformat": "^4.4.6",
@@ -116,19 +139,13 @@
     "flow-bin": "~0.102.0",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
+    "identity-obj-proxy": "^3.0.0",
     "imports-loader": "^0.8.0",
-    "jsdom": "^15.2.1",
+    "jest": "^24.9.0",
+    "jest-watch-typeahead": "^0.4.2",
     "json-loader": "^0.5.4",
-    "karma": "^4.4.1",
-    "karma-jsdom-launcher": "^8.0.0",
-    "karma-mocha": "^1.0.0",
-    "karma-nyan-reporter": "^0.2.3",
-    "karma-sinon": "^1.0.4",
-    "karma-sourcemap-loader": "*",
-    "karma-webpack": "^4.0.2",
     "loader-utils": "^1.0.0",
     "mini-css-extract-plugin": "^0.8.0",
-    "mocha": "^6.2.2",
     "node-sass": "^4.13.0",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",

src/components/user/actions.test.js

@@ -1,2 +0,0 @@
-describe('components/user/actions', () => {
-});

src/services/authFlow/AcceptRulesState.test.js

@@ -51,7 +51,7 @@ describe('AcceptRulesState', () => {
     describe('#resolve', () => {
         it('should call acceptRules', () => {
             expectRun(mock, 'acceptRules')
-                .returns(Promise.resolve());
+                .returns(new Promise(() => {}));
 
             state.resolve(context);
         });

src/services/authFlow/ActivationState.test.js

@@ -63,7 +63,7 @@ describe('ActivationState', () => {
                 mock,
                 'activate',
                 sinon.match.same(payload)
-            ).returns(Promise.resolve());
+            ).returns(new Promise(() => {}));
 
             state.resolve(context, payload);
         });

src/services/authFlow/ForgotPasswordState.test.js

@@ -41,7 +41,7 @@ describe('ForgotPasswordState', () => {
                 sinon.match({
                     login: expectedLogin
                 })
-            ).returns(Promise.resolve());
+            ).returns(new Promise(() => {}));
 
             state.resolve(context, {login: expectedLogin});
         });

src/services/authFlow/LoginState.test.js

@@ -59,7 +59,7 @@ describe('LoginState', () => {
                 mock,
                 'login',
                 sinon.match.same(payload)
-            ).returns(Promise.resolve());
+            ).returns(new Promise(() => {}));
 
             state.resolve(context, payload);
         });

src/services/authFlow/RecoverPasswordState.test.js

@@ -53,7 +53,7 @@ describe('RecoverPasswordState', () => {
                 mock,
                 'recoverPassword',
                 sinon.match(expectedPayload)
-            ).returns(Promise.resolve());
+            ).returns(new Promise(() => {}));
 
             state.resolve(context, expectedPayload);
         });

src/services/authFlow/RegisterState.test.js

@@ -44,7 +44,7 @@ describe('RegisterState', () => {
                 mock,
                 'register',
                 sinon.match.same(payload)
-            ).returns(Promise.resolve());
+            ).returns(new Promise(() => {}));
 
             state.resolve(context, payload);
         });

src/services/authFlow/ResendActivationState.test.js

@@ -58,7 +58,7 @@ describe('ResendActivationState', () => {
                 mock,
                 'resendActivation',
                 sinon.match.same(payload)
-            ).returns(Promise.resolve());
+            ).returns(new Promise(() => {}));
 
             state.resolve(context, payload);
         });

webpack-utils/intl-loader.js

@@ -1,9 +1,8 @@
-module.exports = function(content) {
+function transform(src, modulePath, rootContext) {
-    this.cacheable && this.cacheable();
+    const json = JSON.parse(src);
-    content = JSON.parse(content);
 
-    const moduleId = this.context
+    const moduleId = modulePath
-        .replace(this.rootContext, '')
+        .replace(rootContext, '')
         // TODO: can't find the way to strip out this path part programmatically
         // this is a directory from resolve.modules config
         // may be this may work: .replace(this._compiler.options.resolve.root, '')
@@ -11,20 +10,28 @@ module.exports = function(content) {
         .replace(/^\/|\/$/g, '')
         .replace(/\//g, '.');
 
-    content = JSON.stringify(
+    return JSON.stringify(
-        Object.keys(content).reduce(
+        Object.keys(json).reduce(
             (translations, key) => ({
                 ...translations,
                 [key]: {
                     id: `${moduleId}.${key}`,
-                    defaultMessage: content[key]
+                    defaultMessage: json[key]
                 }
             }),
             {}
         )
     );
+}
+
+module.exports = function(content) {
+    this.cacheable && this.cacheable();
+
+    content = transform(content, this.context, this.rootContext);
 
     return `import { defineMessages } from 'react-intl';
 
 export default defineMessages(${content})`;
 };
+
+module.exports.transform = transform;