测试设置 - Karma配置

优质

小牛编辑

125浏览

2023-12-01

通过导出一个接受Karma将要使用的配置对象的函数，可以将配置文件放在一起。修改此对象的某些属性将告诉Karma我们想要做什么。让我们来看一下在这个配置文件中使用的一些关键属性：


  'jasmine',
],

frameworks是我们要使用的测试框架的列表。这些框架必须通过NPM作为依赖项安装在我们的项目中，或/和作为Karma插件。

插件

plugins: [
  'karma-jasmine',
  'karma-webpack',
  'karma-coverage',
  'karma-remap-istanbul',
],

将karma与测试框架（如Jasmine）或构建系统（如Webpack）集成的插件。

files 是要加载到浏览器/测试环境中的文件的列表。这些文件会按顺序加载，所以顺序很重要。文件列表还可以采用glob模式的形式，因为为每个创建的新测试脚本手动添加新文件变得相当繁琐。
在angular2-redux-starter karma.conf.js中，我们将我们希望包含的测试文件放在一个单独的文件 - src / tests.entry.ts中，它包含一个require调用，使用regex模式导入文件. spec.ts文件扩展名。随着项目越来越大，要包括的文件数量越来越复杂，这是一个很好的做法是将文件导入到一个单独的文件中 - 这使karma.conf.js文件更清晰，更易读。这里是我们的src / tests.entry.ts看起来像：

let testContext = (<{ context?: Function }>require).context('./', true, /\.test\.ts/);
testContext.keys().forEach(testContext);

预处理器

preprocessors: {
  './src/tests.entry.ts': [
    'webpack',
    'sourcemap',
  ],
  './src/**/!(*.test|tests.*).(ts|js)': [
  ],
}

在angular2-redux-starter中，这个过程是用webpack完成的，所以我们在所有的测试文件（以.spec.ts结尾的文件）上显式调用webpack处理器。我们还加载源自源映射处理器的换代的任何sourcemap文件。

如果项目使用webpack，那么在Karma配置对象中的属性webpack是我们可以使用Karma配置webpack的位置。在angular2-redux-starter中，插件和加载程序从它们自己的文件中导出，以便通过webpack config和karma config导入，使配置对象更小。

使用webpack，我们可以配置如何捆绑我们的单元测试; 也就是说，是将所有测试打包到单个包中，还是将每个单元测试都包含在自己的包中等。无论如何，单元测试不应与其余应用程序代码捆绑在一起（尤其是在生产中！）。在angular2-redux-starter中，我们选择将所有单元测试捆绑在一起。

coverageReporters 和 reporters

reporters: ['spec']
  .concat(coverage)
  .concat(coverage.length > 0 ? ['karma-remap-istanbul'] : []),
remapIstanbulReporter: {
  src: 'coverage/chrome/coverage-final.json',
    html: 'coverage',
  },
},
coverageReporter: {
  reporters: [
    { type: 'json' },
  ],
  subdir: (browser) => {
    return browser.toLowerCase().split(/[ /-]/)[0]; // returns 'chrome'
  },
},

coverageReporter用于配置我们的代码覆盖率工具（我们的工具链使用伊斯坦布尔）的结果输出。这里我们指定以JSON和HTML格式输出结果。报告将显示在coverage/文件夹中。

port: 9999,
browsers: ['Chrome'], // Alternatively: 'PhantomJS'
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,

port, browsers 和singleRun 配置我们的单元测试将运行的环境。 browsers属性指定了我们希望Karma启动和捕获输出的浏览器。我们可以使用Chrome，Firefox，Safari，IE或Opera（需要为每个浏览器安装额外的Karma启动器）。对于无浏览器的DOM实例，我们可以使用PhantomJS（如工具链部分中所述）。

我们还可以通过浏览到http://localhost:port手动捕获浏览器的输出，其中port是port属性中指定的数字（如果未指定，则默认值为9876）。属性singleRun控制Karma如何执行，如果设置为true，Karma将启动配置的浏览器，运行测试，然后退出0或，这取决于是否所有测试通过。

定制所有这些属性的最终结果是在angular-redux-starter中的karma.conf.js文件。

这只是angular2-redux-starter项目使用的karma.conf.js中的核心属性的示例。还有更多的属性可以用于扩展和配置Karma的功能 - 看看完整的官方API文档。