对需要 Electron 的 Angular2 服务进行单元测试答案

【问题标题】：Unit testing an Angular2 service that requires Electron对需要 Electron 的 Angular2 服务进行单元测试
【发布时间】：2016-12-14 00:13:42
【问题描述】：

我正在使用 Angular2 (rc4) 和 Webpack 开发一个 Electron 应用程序。单元测试使用 Karma 运行。

我有一个与电子进程通信的服务，它以这种方式包含它：

import { remote } from 'electron';

@Injectable()
export class SettingsService {
    main = remote.require('./main.js');
    settings: any;
    constructor() {
        this.settings = this.main.getSettings();
    }
}

当我想为此文件编写单元测试时，业力运行器会抛出此错误：

Error: Cannot find module "electron"
  at webpack:///src/app/services/settings.service.ts:9:0 <- spec-bundle.js:88524

如果我将 target:'electron-renderer' 添加到 webpack.test.js 配置文件中，错误会变为：

ReferenceError: Can't find variable: require
at webpack:/external%20%22electron%22:1:0 <- spec-bundle.js:83860

这是我的 webpack.test.js 文件：

const helpers = require('./helpers');

module.exports = {
  devtool: 'inline-source-map',

  resolve: {
    extensions: ['', '.ts', '.js']
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'ts'
      },
      {
        test: /\.html$/,
        loader: 'html'

      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'null'
      },
      {
        test: /\.css$/,
        loader: 'null'
      }
    ],

    postLoaders: [

      {
        test: /\.(js|ts)$/, loader: 'istanbul-instrumenter-loader',
        include: helpers.root('src'),
        exclude: [
          /\.(e2e|spec)\.ts$/,
          /node_modules/
        ]
      }
    ]
  },
  target:'electron-renderer'
}

问题是：如何在与 Electron 进程通信的 Angular2 组件上运行单元测试。

【问题讨论】：

标签： unit-testing angular electron

【解决方案1】：

解决方案是使用 karma-electron。

应将 karma.conf.js 更改为使用电子作为浏览器：

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

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

        frameworks: ['jasmine'],

        files: [{ pattern: './spec-bundle.js', watched: false }],

        preprocessors: { './spec-bundle.js': ['electron', 'coverage', 'webpack', 'sourcemap'] },

        webpack: webpackConfig,

        coverageReporter: {
            dir: '../coverage/',
            reporters: [
                {
                    type: 'text-summary',
                    type: 'json',
                    type: 'html',
                }
            ]
        },

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

        webpackServer: {
            noInfo: true
        },

        reporters: ['spec', 'coverage'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: false,
        browsers: ['Electron'],
        singleRun: true,

        client: {
            useIframe: false
        }
    };

    config.set(_config);
};

但是，这仍然会抛出错误：

Uncaught ReferenceError: exports is not defined
at <appath>/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:32

这已经在 jasmine-core 中解决了，但在 jasmine-npm 中还没有解决（参见：https://github.com/jasmine/jasmine/issues/1144

在发布新的 npm 版本的 jasmine-core 之前的解决方法是使用直接 github 链接而不是 package.json 中的 npm 包版本：

"devDependencies": {
  ....
  "jasmine-core": "https://github.com/jasmine/jasmine.git",
  ....
}

【讨论】：