使用 angular4 + mocha + karma 重复测试

Question

问题/问题

我已将 angular-cli 1.0.0 生成的基本项目从使用 jasmine 转换为使用 mocha。 为什么当我完成到 mocha 的转换时，所有测试都运行两次？有趣的是，当我们使用 wallabyjs runner 或降级的 angular2 运行相同的测试/代码时，测试只运行一次。

为了从头开始复制，我采取了 3 个步骤和可选的第 4 个步骤。不幸的是，这涉及到很多代码，因此我提供了一个存储库来进行演示，并提供了一个用于执行每个步骤的命令，可以在步骤详细信息中找到。

第一步用angular-cli创建项目

• ng new someBlankProject
• cd someBlankProject
• ng test 预期结果 3 次测试运行

详情

• 配置
  • angular-cli + angular4 + 业力 + 茉莉花
• angular-cli 项目 jasmine + karma 测试结果
  • only 3 tests in source
• 复制命令
  • git clone git@github.com:arranbartish/angular-cli-seed.git 01-fresh-project; cd 01-fresh-project; git checkout 2bf12b577173085344a86e37726d9f7ece930c77;npm install;npm run test -- --single-run=true

第 2 步验证 jasmine 测试是否使用 karma 和 wallaby 在本地和 CI 上运行

• 引入diff 包括CI 和wallabyjs runner
  • npm install 解决依赖关系
• ng test 预期结果 3 次测试运行
• 与wallabyjs 确认No failing tests, 3 passing

详情

• 配置
  • angular-cli + angular4 + 业力 + 茉莉花
• angular-cli 项目 jasmine + karma 测试结果
  • 通过构建3 of 3 tests passing
  • only 3 tests in source
• 复制命令
  • git clone git@github.com:arranbartish/angular-cli-seed.git 02-add-wallaby; cd 02-add-wallaby; git checkout 0bb96884d0e71f286d0b4fedc0dcafd20dc9d2b1;npm install;npm run test -- --single-run=true
• wallabyjs 结果
  • No failing tests, 3 passing

第 3 步引入 mocha 并将规格从 jasmine 转换为 mocha

• 引入diff转换为mocha
  • npm prune;npm install 清理和解决依赖关系
• ng test 预期结果 3 次测试运行 实际结果 6 次测试运行
  • Chromeium 53.0.2785 (Ubuntu 0.0.0): Executed 6 of 3 SUCCESS (0.347 secs / 0.042 secs)
• 与wallabyjs 确认No failing tests, 3 passing

详情

• 配置
  • angular-cli + angular4 + karma + mocha
• angular-cli 项目 mocha + karma 测试结果
  • “失败”构建6 of 3 tests passing
  • only 3 tests in source
• 复制命令
  • git clone git@github.com:arranbartish/angular-cli-seed.git 03-converted-mocha; cd 03-converted-mocha; git checkout 0a9ed8804e15c451ff0d67ebd2d38980d54f9763;npm install;npm run test -- --single-run=true
• wallabyjs 结果
  • No failing tests, 3 passing

可选观察

我观察到的最奇怪的事情之一是使用 angular 2 并没有相同的行为！

第 4 步将角度从 4 降级为 2

• 引入diff降级angular4
  • npm prune;npm install 清理和解决依赖关系
• ng test 预期结果 3 次测试运行
• 与wallabyjs 确认No failing tests, 3 passing

步骤详情

• 配置
  • angular-cli + angular2 + karma + mocha
• angular-cli project mocha + karma + angular2 测试结果
  • 通过构建3 of 3 tests passing
  • only 3 tests in source
• 复制命令
  • git clone git@github.com:arranbartish/angular-cli-seed.git 04-downgrade-angular; cd 04-downgrade-angular; git checkout 0e6c2811b9aab722fcc382e4676d97c089ad1f91;npm install;npm run test -- --single-run=true
• wallabyjs 结果
  • No failing tests, 3 passing

Answer 1

业力的框架配置是问题

因为 wallabyjs 按预期工作，我花了很多时间探索 karma 和 karma-mocha，重点关注 karma.conf.js

损坏的 karma.conf.js

// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['mocha', 'chai', 'sinon-chai', '@angular/cli'],
    plugins: [
      require('karma-mocha'),
      require('karma-chai'),
      require('karma-sinon'),
      require('karma-sinon-chai'),
      require('karma-chrome-launcher'),
      require('karma-phantomjs-launcher'),
      require('karma-mocha-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('karma-istanbul-threshold'),
      require('@angular/cli/plugins/karma')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    files: [
      { pattern: 'node_modules/sinon/pkg/sinon.js', instrument: false },
      { pattern: 'node_modules/chai/chai.js', instrument: false },
      { pattern: 'node_modules/sinon-chai/lib/sinon-chai.js', instrument: false },
      { pattern: './src/test.ts', watched: false }
    ],
    preprocessors: {
      './src/test.ts': ['@angular/cli']
    },
    mime: {
      'text/x-typescript': ['ts','tsx']
    },
    coverageIstanbulReporter: {
      reports: [ 'html', 'lcovonly', 'json' ],
      fixWebpackSourcePaths: true
    },
    istanbulThresholdReporter: {
      src: 'coverage/coverage-final.json',
      reporters: ['text'],
      thresholds: {
        global: {
          statements: 95.01,
          branches: 75.59,
          lines: 91.89,
          functions: 89.23
        },
        each: {
          statements: 75.76,
          branches: 33.33,
          lines: 75,
          functions: 41.67
        }
      }
    },
    angularCli: {
      environment: 'dev'
    },
    reporters: config.angularCli && config.angularCli.codeCoverage
              ? ['progress', 'coverage-istanbul', 'istanbul-threshold']
              : ['progress', 'mocha'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

我采用的方法是“尝试一些东西直到它起作用”的最佳实践，这意味着我逐行删除部分配置以查看它是否重要并查看它是否改变了行为。

分辨率

具体的修复是从frameworks 数组中删除sinon-chai 和可选的chai。

frameworks: ['mocha', 'chai', 'sinon-chai', '@angular/cli'],

变成

frameworks: ['mocha', '@angular/cli'],

资源

使用 angular-cli / karma / mocha / angular4 可以在this commit 找到工作代码和diff

Travis 构建结果

Chromium 53.0.2785 (Ubuntu 0.0.0): Executed 0 of 3 SUCCESS (0 secs / 0 secs)
Chromium 53.0.2785 (Ubuntu 0.0.0): Executed 1 of 3 SUCCESS (0 secs / 0.062 secs)
Chromium 53.0.2785 (Ubuntu 0.0.0): Executed 2 of 3 SUCCESS (0 secs / 0.079 secs)
Chromium 53.0.2785 (Ubuntu 0.0.0): Executed 3 of 3 SUCCESS (0 secs / 0.086 secs)
Chromium 53.0.2785 (Ubuntu 0.0.0): Executed 3 of 3 SUCCESS (0.32 secs / 0.086 secs)