代码改变世界

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

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

当你拿到十五年前的一堆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: 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/'
    },
    
    
  16. 通过如下命令改为spec模式

    npm install karma-spec-reporter --save-dev
    
  17. 修改karma.conf.js

    reporters: ['spec'],
    
  18. git check in (不要签入coverage目录,但是要把node_modules目前签入,因为时过境迁,旧的package会被删掉,只能靠这里的git库来还原了。)