19
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

TypeScript2.1+mocha+power-assertでテストしようとして苦戦した話

Last updated at Posted at 2017-01-24

TypeScript初心者です。
Node.jsで開発して規模が大きくなってくると型が恋しくなってきますね。TypeScriptはVisual Studio Codeでの補完も効くし、コンパイラがくだらないミスを教えてくれるのでうっかりさんには嬉しいです。

しかし、素のNode.jsで使っていたツール達がそのまま使えないのがネックです。
Node.jsで使用していたmocha, power-assertをTypeScript@2.1.5で使うまでにえらく苦労したのでその軌跡です。

前提

JavaScriptはブラウザで動くフロントエンドの話と、サーバーサイドのNode.jsの話が混在していて情報が錯綜しやすいのですが、本稿はサーバーサイドのNode.jsに関する話です。

ディレクトリ構成
.
├── dist
├── node_modules
├── package.json
├── src
│   └── index.ts
├── test
│   ├── index.test.ts
│   └── mocha.opts
└── tsconfig.json
tsconfig.json
{
  "compileOnSave": true,
  "compilerOptions": {
    "outDir": "./dist",
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "lib": [
      "es2015",
      "es2015.promise"
    ],
    "types": [
      "node"
    ],
    "allowJs": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  },
  "include": [
    "./src/**/*.ts"
  ]
}

mochaのテストケースをTypeScriptで書くにはどうしたら良いのだろう

プロダクションコードがTypeScriptならテストコードもTypeScriptで書きたくなるのは当然。
その場合、tscでtest/**もトランスパイルして、出来たJSをmochaで実行するの?

いいえ違いました。mochaを実行するときに--compilersオプションを指定することでテスト実行前にプリコンパイルする機構がmochaにありました。

mocha --compilers ts:ts-node/register test/**/*.ts
mocha --compilers ts:espower-typescript/guess test/**/*.ts

このように任意のコンパイラを指定できるようです。

ここではespower-typescriptを使用します。

describe, itが見つからない

test/index.test.ts (2,24): Could not find a declaration file for module 'mocha'. '/home/newgyu/Desktop/typescript-mocha-power-assert/node_modules/mocha/index.js' implicitly has an 'any' type. (7016)
test/index.test.ts (6,1): Cannot find name 'describe'. (2304)
test/index.test.ts (7,3): Cannot find name 'it'. (2304)

まず、npm install -D @types/mochaでmochaの型定義を入れます。

そして、テストコードに

import * as mocha from "mocha";

を追加します。

power-assertでassertする

このセクションに書かれた問題はespower-typescriptが普通に使えるようになり解消されました。
理由はよくわかりません...

ts-nodeだけだとpower-assertの旨味である失敗時の詳細なレポートが表示されません。

  1) test of hogehoge case fugafuga:

      AssertionError: false == true
      + expected - actual

      -false
      +true
      
      at Decorator._callFunc (node_modules/empower-core/lib/decorator.js:110:20)
      at Decorator.concreteAssert (node_modules/empower-core/lib/decorator.js:103:17)
      at decoratedAssert (node_modules/empower-core/lib/decorate.js:51:30)
      at powerAssert (node_modules/empower-core/index.js:63:32)
      at Context.<anonymous> (test/index.test.ts:8:5)

ただのassertとか変わらない結果になってしまいます。

そこでTypeScriptとpower-assertを組み合わせる手段としてpowerassertの公式ではespower-typescriptの使用が推奨されるようですが、どうもうまく動きません。

TypeError: Cannot read property 'text' of undefined

こんなの出ちゃうんですよね。ここに関してはよくわからずIssueを上げました

ひとまずはespower-typescriptの使用を諦めて、espower-ts-nodeを使うことにします。

$ npm i -D espower-ts-node
$ mochamocha --compilers ts:ts-node/register test/**/*.ts --require espower-ts-node

で、出来たのがこんなのです

19
13
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?