使用Jasmine和karma对传统js进行单元测试

2020-09-19 22:25 叶伟民阅读(220) 评论(0) 编辑收藏举报

当你拿到十五年前的一堆javascript的代码，你如何对这堆javascript代码写单元测试呢？于是就有了这篇文章。

注意：不需要装任何现代化js框架，包括angular，react,vue之类的，都不需要装！！！

先要安装nodejs
直接cmd进入js所在的目录
通过 npm 安装karma：
```
npm install --save-dev karma
```

通过如下命令确认karma安装成功

node ./node_modules/karma/bin/karma --version

global安装karma-cli来直接执行karma命令
```
npm i -g karma-cli
```
通过如下命令确认安装成功
```
karma --version
```

通过如下命令安装jasmine

npm i -D jasmine-core karma-jasmine karma-chrome-launcher

通过如下命令创建 karma.conf.js 配置文件
```
karma init
```

配置karma.conf.js

browsers: ['ChromeHeadless'],
customLaunchers: {
ChromeHeadlessCI: {
      base: 'ChromeHeadless',
      flags: ['--no-sandbox']
   }
}

配置karma.conf.js以让karma能够找到你的测试文件：

files: [      
   '*.js',
   '*.spec.js'
],
exclude: ['karma.conf.js'],

添加test_if_karma_works.js，并ctrl+v以下内容
```
function add(a, b){
   return a + b;
}
```

添加test_if_karma_works.spec.js，并ctrl+v以下内容

describe('add function unit test.', function(){
   it('2 + 3 = 5', function(){
      var result  = add( 2, 3 );
      expect( result ).toBe( 5 );
   });

   it('2 + 3 = 6, this should faild.', function(){
      var result = add( 2, 3 );
      expect(result).toBe( 6 );
   })
});

通过如下命令开始测试

karma start

或者

node ./node_modules/karma/bin/karma start

通过如下命令安装karma代码覆盖率
```
npm install --save-dev karma-coverage
```

修改karma.conf.js

// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
/* 覆盖源文件 不包括测试库文件*/
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'],

/* 新增的配置项 */
coverageReporter: {
   type: 'html',
   dir: 'coverage/'
},

通过如下命令改为spec模式

npm install karma-spec-reporter --save-dev

修改karma.conf.js
```
reporters: ['spec'],
```
git check in （不要签入coverage目录，但是要把node_modules目前签入，因为时过境迁，旧的package会被删掉，只能靠这里的git库来还原了。）

刷新页面返回顶部

叶伟民

使用Jasmine和karma对传统js进行单元测试

About