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

• 2020 年 9 月 19 日
• 笔记
• tdd, 单元测试, 测试驱动开发

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

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

1. 先要安装nodejs

2. 直接cmd进入js所在的目录

3. 通过 npm 安装karma：

   npm install --save-dev karma
   

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

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

5. global安装karma-cli来直接执行karma命令

   npm i -g karma-cli
   

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

   karma --version
   

7. 通过如下命令安装jasmine

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

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

   karma init
   

9. 配置karma.conf.js

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

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

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

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

    function add(a, b){
       return a + b;
    }
    

12. 添加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 );
       })
    });
    

13. 通过如下命令开始测试

    karma start
    

    或者

    node ./node_modules/karma/bin/karma start
    

14. 通过如下命令安装karma代码覆盖率

    npm install --save-dev karma-coverage
    

15. 修改karma.conf.js

    // preprocess matching files before serving them to the browser
    // available preprocessors: //npmjs.org/browse/keyword/karma-preprocessor
    /* 覆盖源文件 不包括测试库文件*/
    preprocessors: {
       'src/**/*.js': ['coverage']
    },
    
    
    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: //npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress', 'coverage'],
    
    /* 新增的配置项 */
    coverageReporter: {
       type: 'html',
       dir: 'coverage/'
    },
    
    

16. 通过如下命令改为spec模式

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

17. 修改karma.conf.js

    reporters: ['spec'],
    

18. git check in （不要签入coverage目录，但是要把node_modules目前签入，因为时过境迁，旧的package会被删掉，只能靠这里的git库来还原了。）