如何在带有电子和NodeJ 8的Angular 7中以Jest方式迁移或使用现有的业力茉莉茉莉

Question

我是Angular和Node Js开发的新手。我将Angular 7，NodeJs 8.12和Electron用于桌面应用程序。我必须使用Jest来在代码覆盖率方面更快地运行测试用例。如何从现有的业力和茉莉花迁移到Jest框架？

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());

我需要做哪些必要的更改，以便可以进行代码覆盖而又没有重大的重大更改？

Answer 1

非常感谢，有一些原理图可以帮助您解决迁移问题。

Jest Schematics。

用法：

ng add @briebug/jest-schematic

应该使您的迁移几乎没有痛苦。