本文主要描述使用Mocha、Istanbul和Chai實現TypeScript單元測試和覆蓋率的方法和過程，並簡單記錄SonarQube的相關配置。

Github: https://github.com/prufeng/tsexpress

關於JavaScript的單元測試和覆蓋率，可參考：使用Mocha和Istanbul實現Node.js單元測試和覆蓋率

文章目錄

• Install
• Mocha
• mocha.opts
• app.spec.ts
• Unit Test
• Istanbul(nyc)
• package.json
• npm test
• SonarQube
• Install SonarQube Plugin - SonarTS
• sonar.properties
• Reference

Install

安裝相關module和types。
Mocha是基本單元測試工具。
nyc用來統計程式碼覆蓋率。
Chai則主要用來測試HTTP request。

npm i -D mocha
npm i -D nyc
npm i -D chai
npm i -D chai-http
npm i -D source-map-support

npm i -D @types/mocha
npm i -D @types/chai
npm i -D @types/chai-http
 

Mocha

mocha.opts

建立test/mocha.opts，配置如下。

--require ts-node/register
--require source-map-support/register
--recursive
--full-trace
--bail
test/**/*.spec.ts

app.spec.ts

建立test/app.spec.ts，新增以下test case測試當前的幾個RESTful API。

import chai from 'chai';
import chaiHttp from 'chai-http';
import server from '../src/server';

let should = chai.should();
chai.use(chaiHttp);

describe('App Unit Test', () => {
    it('should get status 200', (done) => {
        chai.request(server)
            .get('/')
            .end((err, res) => {
                res.should.have.status(200);
                done();
            });
    });
    it('should get user list', (done) => {
        chai.request(server)
            .get('/users')
            .end((err, res) => {
                res.should.have.status(200);
                res.text.should.eql('respond with the user list here');
                done();
            });
    });
    it('should get status 404', (done) => {
        chai.request(server)
            .get('/wrongUrl2018')
            .end((err, res) => {
                res.should.have.status(404);
                // res.text.should.eql('respond with the user list here');
                done();
            });
    });
});

 

Unit Test

執行mocha命令，測試通過的結果如下。

mocha

  App Unit Test
GET / 200 13.293 ms - 198
    √ should get status 200
GET /users 200 0.662 ms - 31
    √ should get user list
GET /wrongUrl2018 404 7.099 ms - 1339
    √ should get status 404


  3 passing (55ms)

Istanbul(nyc)

package.json

修改package.json，增加nyc相關配置。
include和extesion包含需要測試的source code，reporter指明需要生成的report，預設為text。

  "scripts": {
    "start": "npm run serve",
    "serve": "node dist/out-tsc/server",
    "test": "nyc mocha",
    "build":"tsc -p tsconfig.json"
  },
  "nyc": {
    "include": [
      "src/**/*.ts",
      "src/**/*.tsx"
    ],
    "exclude": [
      "**/*.d.ts"
    ],
    "extension": [
      ".ts",
      ".tsx"
    ],
    "require": [
      "ts-node/register"
    ],
    "reporter": [
      "text",
      "html"
    ],
    "sourceMap": true,
    "instrument": true,
    "all": true
  },

npm test

npm test實際上是執行nyc mocha，但直接執行nyc mocha得不到正確的結果，因為無法載入package.json裡的nyc配置。
成功執行後參考結果如下。

--------------------|----------|----------|----------|----------|-------------------|
File                |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
--------------------|----------|----------|----------|----------|-------------------|
All files           |    79.03 |    36.84 |    85.71 |    79.03 |                   |
 src                |       74 |    33.33 |    66.67 |       74 |                   |
  app.ts            |      100 |      100 |      100 |      100 |                   |
  server.ts         |    56.67 |    33.33 |    66.67 |    56.67 |... 70,72,73,74,76 |
 src/app/common     |      100 |       50 |      100 |      100 |                   |
  errHandler.ts     |      100 |       50 |      100 |      100 |               7,9 |
 src/app/demo       |      100 |      100 |      100 |      100 |                   |
  homeController.ts |      100 |      100 |      100 |      100 |                   |
  userController.ts |      100 |      100 |      100 |      100 |                   |
--------------------|----------|----------|----------|----------|-------------------|

如果生成了html report，可在coverage目錄下開啟index.html。html report的好處是可以點選檢視每個檔案的具體測試覆蓋詳情。

SonarQube

Install SonarQube Plugin - SonarTS

https://docs.sonarqube.org/display/PLUG/SonarTS

sonar.properties

sonar.javascript.lcov.reportPaths=coverage/lcov.info
sonar.typescript.lcov.reportPaths=coverage/lcov.info

(Works without sonar.typescript.lcov.reportPaths configure from my test. )

Reference

https://istanbul.js.org/docs/tutorials/typescript/