How to migrate or use existing karma Jasmine with Jest in Angular 7 with Electron and NodeJs 8

Question

I am new to Angular and Node Js development. I am using Angular 7, with NodeJs 8.12 and Electron for a desktop application. I have to use Jest to run the test cases faster with code coverage. How to migrate to Jest framework from existing karma and jasmine?

package.json

"scripts": {
    "start": "electron .",
    "lint": "tslint \"src/**/*.ts\"",
    "test:watch": "karma start ./config/karma.conf.js --auto-watch=true --single-run=false",
    "test": "karma start ./config/karma.conf.js",
    "build:watch": "webpack --config config/webpack.dev.js --watch",
    "build": "rimraf dist && webpack --config config/webpack.dev.js",
    "build:prod": "webpack --config config/webpack.prod.js",
    "postinstall": "electron-builder install-app-deps",
    "win:installer": "rimraf installers && npm run build:prod && build --win",
    "e2e": "mocha --timeout 20000 \"./e2e/**/index.spec.js\""

  }

karma.conf.js

const webpackConfig = require('./webpack.test');

module.exports = function (config) {
    const _config = {
        basePath: '',

        frameworks: ['jasmine'],

        files: [
            { pattern: './karma-test-shim.js', watched: false },
        ],

        preprocessors: {
            './karma-test-shim.js': ['webpack', 'electron'],
        },

        webpack: webpackConfig,

        webpackMiddleware: {
            stats: 'errors-only'
        },

        webpackServer: {
            noInfo: true
        },

        coverageIstanbulReporter: {
            reports: ['html', 'lcovonly', 'text-summary'],
            dir: './coverage',
            fixWebpackSourcePaths: true,
            'report-config': {
                html: {
                    subdir: 'html'
                },
                lcovonly: {
                    file: 'coverage.lcov'
                }
            }
        },

        reporters: ['progress', 'coverage-istanbul'],

        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: false,
        browsers: ['Electron'],
        singleRun: true,
        client: {
            useIframe: false,
        },
    };

    config.set(_config);
};

karma-test-shim.js

Error.stackTraceLimit = Infinity;

require('core-js/es6');
require('core-js/es7/reflect');

require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy');
require('zone.js/dist/sync-test');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');

const appContext = require.context('../src', true, /\.spec\.ts/);

appContext.keys().forEach(appContext);

const testing = require('@angular/core/testing');
const browser = require('@angular/platform-browser-dynamic/testing');

testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());

What are the necessary changes I have to do so that code coverage can be performed without any major breaking changes?

Answer 1

Thankfully there are some schematics that can gelp you with the migration.

Jest Schematics .

Usage:

ng add @briebug/jest-schematic

Should make your migration near painless.