当你拿到十五年前的一堆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库来还原了。)