當你拿到十五年前的一堆javascript的程式碼，你如何對這堆javascript程式碼寫單元測試呢？於是就有了這篇文章。 注意：**不需要裝任何現代化js框架，包括angular，react,vue之類的，都不需要裝！！！** 1. 先要安裝[nodejs](https://nodejs.org/zh-cn/download/) 2. 直接cmd進入js所在的目錄 3. 通過 npm 安裝karma： ``` npm install --save-dev karma ``` 1. 通過如下命令確認karma安裝成功 ``` node ./node_modules/karma/bin/karma --version ``` 4. global安裝karma-cli來直接執行karma命令 ``` npm i -g karma-cli ``` 6. 通過如下命令確認安裝成功 ``` karma --version ``` 6. 通過如下命令安裝jasmine ``` npm i -D jasmine-core karma-jasmine karma-chrome-launcher ``` 8. 通過如下命令建立 karma.conf.js 配置檔案 ``` karma init ``` 10. 配置karma.conf.js ``` browsers: ['ChromeHeadless'], customLaunchers: { ChromeHeadlessCI: { base: 'ChromeHeadless', flags: ['--no-sandbox'] } } ``` 11. 配置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; } ``` 13. 新增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 ``` 16. 修改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/' }, ``` 17. 通過如下命令改為spec模式 ``` npm install karma-spec-reporter --save-dev ``` 18. 修改karma.conf.js ``` reporters: ['spec'], ``` 19. git check in （不要簽入coverage目錄，但是要把node_modules目前簽入，因為時過境遷，舊的package會被刪掉，只能靠這裡的git庫來還原