Clever Geek Handbook

TypeScriptでのユニットテストの記述（猫の例による）

TypeScriptプロジェクトで単体テストを作成するにはどうすればよいですか？この記事では、この質問に答えるとともに、TypeScriptを使用してプロジェクトの単体テスト環境を作成する方法を紹介します。





ユニットテストとは何ですか？

単体テスト-アプリケーションのさまざまなレイヤーに適用されるテストで、アプリケーション内の最小の分割可能なロジック（モジュール、クラス、メソッドなど）をテストします。





, , , () .





. , . . , , . .





. :





project
| node_modules
| src
| package.json
| tsconfig.json

./src



cat.module.ts



Cat.





export class Cat {
  public name: string;
  public color: string;

  constructor(name: string, color: string) {
    this.name = name;
    this.color = color;
  }

  public move(distanceMeter: number) : string {
    return `${this.name} moved ${distanceMeter}m.`;
  }

  public say() : string {
    return `Cat ${this.name} says meow`;
  }
}

, . (SUT - system under test).





, test, .





npm :





npm install --save-dev ts-node mocha @testdeck/mocha nyc chai @types/chai







:

ts-node



- TypeScript REPL node.js.





mocha



- , , . . @testdeck/mocha



- testdeck , .





nyc



- CLI Istanbul, .





chai



- (assertions), . . @types/chai



typescript'





, test



, tsconfig.json



, TS .





{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./",
    "module": "commonjs",
    "experimentalDecorators": true,
    "strictPropertyInitialization": false,
    "isolatedModules": false,
    "strict": false,
    "noImplicitAny": false,
    "typeRoots" : [
      "../node_modules/@types"
    ]
  },
  "exclude": [
    "../node_modules"
  ],
  "include": [
    "./**/*.ts"
  ]
}

include test .ts





, register.js



ts-node, .





const tsNode = require('ts-node');
const testTSConfig = require('./test/tsconfig.json');

tsNode.register({
  files: true,
  transpileOnly: true,
  project: './test/tsconfig.json'
});

, .mocharc.json



, :





{
  "require": "./register.js",
  "reporter": "list"
}

.nyrc.json



.





{
  "extends": "@istanbuljs/nyc-config-typescript",
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules/"
  ],
  "extension": [
    ".ts"
  ],
  "reporter": [
    "text-summary",
    "html"
  ],
  "report-dir": "./coverage"
}

, :





project
| node_modules
| src
| test
| --- tsconfig.json
| .mocharc.json
| .nyrc.json
| package.json
| register.js
| tsconfig.json

package.json 







"test": "nyc ./node_modules/.bin/_mocha 'test/**/*.test.ts'"

,





./test



cat.unit.test.ts



:





import { Cat } from '../src/cat.module';
import { suite, test } from '@testdeck/mocha';
import * as _chai from 'chai';
import { expect } from 'chai';

_chai.should();
_chai.expect;

@suite class CatModuleTest {
  private SUT: Cat;
  private name: string;
  private color: string;

  before() {
    this.name = 'Tom';
    this.color = 'black';
    this.SUT = new Cat(this.name, this.color);
  }
}

Cat cat.module.ts



, , .





before Cat, .





, .





import { Cat } from '../src/cat.module';
import { suite, test } from '@testdeck/mocha';
import * as _chai from 'chai';
import { expect } from 'chai';

_chai.should();
_chai.expect;

@suite class CatModuleTest {
  private SUT: Cat;
  private name: string;
  private color: string;

  before() {
    this.name = 'Tom';
    this.color = 'black';
    this.SUT = new Cat(this.name, this.color);
  }

  @test 'Cat is created' () {
    this.SUT.name.should.to.not.be.undefined.and.have.property('name').equal('Tom');
  }
}

npm test :





ご覧のとおり、カバレッジは完全ではなく、11〜15行目はテストされていません。これらはCatクラスのメソッドでありmove



、say.







これらのメソッドにさらに2つのテストを追加すると、テストを含むそのようなファイルになります。





import { Cat } from '../src/cat.module';
import { suite, test } from '@testdeck/mocha';
import * as _chai from 'chai';
import { expect } from 'chai';

_chai.should();
_chai.expect;

@suite class CatModuleTest {
  private SUT: Cat;
  private name: string;
  private color: string;

  before() {
    this.name = 'Tom';
    this.color = 'black';
    this.SUT = new Cat(this.name, this.color);
  }

  @test 'Cat is created' () {
    this.SUT.name.should.to.not.be.undefined.and.have.property('name').equal('Tom');
  }

  @test 'Cat move 10m' () {
    let catMove = this.SUT.move(10);
    expect(catMove).to.be.equal('Tom moved 10m.');
  }

  @test 'Cat say meow' () {
    expect(this.SUT.say()).to.be.equal('Cat Tom says meow');
  }
}

テストを再度実行して、Catクラスが完全なテストカバレッジを持っていることを確認します。





結果

その結果、アプリケーションのテストインフラストラクチャを作成し、既存のコードが壊れていないことを確認しながら、新しいモジュールまたはクラスをテストでカバーできるようになりました。





PS：記事「TypeScriptを使用した単体テストの設定方法」に基づいています。







More articles:


All Articles