Skip to content

Latest commit

 

History

History
143 lines (101 loc) · 2.73 KB

1.1.4 karma-配置测试环境的工具.md

File metadata and controls

143 lines (101 loc) · 2.73 KB

karma-配置测试环境的工具

代码和测试自动加载到浏览器

  • karma: 提供高效的测试环境

用到的模块：

  • karma-cli
  • karma-coverage
  • karma-chai
  • karma-clear-screen-reporter
  • karma-mocha
  • karma-mocha-reporter :可不用
  • karma-firefox-launcher ： 用于火狐浏览器上运行测试
  • karma-chrome-launcher : 用于谷歌浏览器上运行测试
  • karma-opera-launcher ： 用于欧朋浏览器上运行测试
  • karma-safari-launcher ： 用于 safari 浏览器上运行测试
npm i --save-dev karma karma-cli karma-coverage karma-chai karma-clear-screen-reporter karma-chrome-launcher
  • 修改 packages.json
"scripts": {
    "test": "karma start --reporters clear-screen,dots,coverage"
  },

karma 配置

karma.conf.js 配置文件生成：

node node_modules/karma/bin/karma init

会询问你想要使用的测试框架和浏览器，
测试框架： 默认 jasmine， 按住 tab 看到 mocha ，按 enter;
是否使用 require.js: 默认 no,
想要捕获的浏览器： 选择 google,然后按住回车 两次；
其他的问题按回车采用默认值

最后目录下生成 karma.conf.js
  • karma.conf.js
...
// 用到的框架
frameworks: ['mocha', 'chai'],


// list of files / patterns to load in the browser
files: [
  './test/*.js',
  './src/*.js'
],

// 配置测试覆盖率
preprocessors: {
    './src/*.js': 'coverage'
},

// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress', 'coverage'],
...
  • 运行测试
npm test


发现报错了
require is not defined
module is not defined
  • 解决问题

看到有的是ES6----> ES5

npm i --save-dev @babel/core @babel/preset-env karma-babel-preprocessor
  • 创建.babelrc，配置 babel 的预转换格式,
.babelrc

{
  "presets": ["env"]
}
  • 修改karma.conf.js,编辑preprocessors部分,让所有的js文件都先用 babel 转换一下。
preprocessors: {
    "test/*.js": ['babel']
},

我 node 环境，没有用到 ES6 ，我的修改和处理：

因为在浏览器中运行，最后文件做了一些调整

  • 就没有去设置 babel，没有去安装 babel 的一些插件
类似这些，

// var expect = require('chai').expect;
// let isPalindrome = require('../src/palindrome.js');

因为 karma 配置中已经配置框架，所以不必再引入

被测试文件需要把 `module.exports = ` 用  `var isPalindrome = ` 替换

/*module.exports = function(word){
  return true;
}*/

var isPalindrome = function(word){
  return true;
}
  • 运行 karma
npm test

....
Chrome 70.0.3538 (Windows 10.0.0): Executed 5 of 5 SUCCESS (0.016 secs / 0.001 secs)