Skip to main content
 首页 » 编程设计

javascript之如何在带有 Electron 和 NodeJs 8 的 Angular 7 中通过 Jest 迁移或使用现有的 karma Jasmine

2024年12月31日12cloudgamer

我是 Angular 和 Node Js 开发的新手。我将 Angular 7、NodeJs 8.12 和 Electron 用于桌面应用程序。我必须使用 Jest 来通过代码覆盖率更快地运行测试用例。如何从现有的 karma 和 jasmine 迁移到 Jest 框架?

包.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 测试-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()); 

我必须做哪些必要的更改才能在不进行任何重大破坏性更改的情况下执行代码覆盖?

请您参考如下方法:

值得庆幸的是,有一些示意图可以帮助您完成迁移。

Jest Schematics .

用法:

ng 添加@briebug/jest-schematic

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