[TS] yarnでts-jestをインストールして、makeコマンドでテスト実行するまで(テストコードと解説付き)

はじめに

仕事で、TypeScript(以下、TS)に最適化されたJestであるts-jestをyarnでインストールし、makeコマンドで実行するためにMakefileに設定したので、備忘録を残します。

調べた際に、yarnでのインストールではなくnpmでのインストールのパターンが多く、makeコマンドではなくnpm scriptsへの設定ばかりだったので、今回の記事を共有します。是非参考にしてもらえればと思います。

この記事では、以下について書いています。

  • yarnでts-jestをインストールするコマンド
  • Makefileの設定とmakeコマンドでのテスト実行
  • テスト対象関数の作成と解説
  • テストコード作成と解説
  • テストの成功例と失敗例

ts-jestの準備

ディレクトリ構成

{{ workspace }}
    └─ src               ← テストコードやその他の実装があるディレクトリ
    └─ jest.config.js    ← Jestの設定ファイル
    └─ Makefile          ← makeコマンドの設定ファイル

yarnでts-jestをインストール

yarn add --dev jest typescript ts-jest @types/jest

jest.config.jsにts-jestの設定

他にも、package.jsonを使う方法等ありますが、今回はjest.config.jsを設定ファイルとしました。

module.exports = {
  preset: 'ts-jest'
};

これはいくつか方法があるので、設定したいファイル ts-jestとかでググってみて下さい。

Makefileを設定してmakeコマンドでテスト実行

よくあるパターンとしては、package.jsonscriptsキーを準備して、npm scriptを使ってnpm testとかで実行できる方法がありますが。今回はmakeコマンドを使ってテスト実行します。

test:
    npx jest
  • npxとはnpm5.2.0の新機能。詳しくはこちら

テストファイルの準備

ディレクトリ構成

{{ workspace }}
    └─ src
        └─ utils
            └─ index.ts        ← テスト対象関数があるファイル
            └─ index.test.ts   ← テストコード
    └─ jest.config.js
    └─ Makefile

テスト対象の関数のコード

// convertDateToString はDate型の日付をYYYY/MM/DDで返す
export function convertDateToString(date: Date): String {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();

  return year + '/' + month + '/' + day;
}
  • Date型を渡されたら、YYYY/MM/DDのString型にして返す関数です。
  • date.getMonth()では、実際の月から1引いた値(インデックス)が返るので、+1しています。

テストコード

import {convertDateToString} from '.';

describe('index.ts', (): void => {
  test('Convert Date To String YYYY/MM/DD.', (): void => {
    const successPattern = [
      {
        input: new Date(2020, 11, 31),
        want: '2020/12/31',
      },
      {
        input: new Date(2020, 11, 31, 23, 59, 59),
        want: '2020/12/31',
      },
    ];

    successPattern.forEach((e) => {
      const response = convertDateToString(e.input);
      expect(response).toBe(e.want);
    });

    const failedPattern = [
      {
        input: new Date(2020, 12, 31),
        want: '2020/12/31',
      },
    ];

    failedPattern.forEach((e) => {
      const response = convertDateToString(e.input);
      expect(response).not.toBe(e.want);
    });
  });
});
  • テストしたいファイルをimportします。
  • Table Driven Testを意識して、オブジェクトの配列を作成しています。
  • describe('index.ts',←ここの’index.ts’は何でもOKです。実行した際に出力されるので、そのときに分かりやすい文字列を記述しておいて下さい。
  • test('Convert Date To String YYYY/MM/DD.'←ここの、’Convert Date To String YYYY/MM/DD.’も何でもOKです。実行した際に出力されるので、そのときに分かりやすい文字列を記述しておいて下さい。
  • inputに、引数として渡すDate型の値をセットしています。
  • wantに、関数から返ってきてほしい、想定の値をセットしています。
  • expect(response).toBe(want);←この一行で、関数の返り値とwantが一致することを確認しています。
  • expect(response).not.toBe(want);←この一行で、関数の返り値とwantが一致しないことを確認しています。

テストの実行と結果の例

make testコマンドでテストが実行されます。

成功例

$ yarn test
yarn run v1.21.1
$ jest
 PASS  src/utils/index.test.ts
  index.ts
    ✓ Convert Date To String YYYY/MM/DD. (2 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.702 s
Ran all test suites.
✨  Done in 4.35s.

失敗例

$ yarn test
yarn run v1.21.1
$ jest
 FAIL  src/utils/index.test.ts
  index.ts
    ✕ Convert Date To String YYYY/MM/DD. (6 ms)

  ● index.ts › Convert Date To String YYYY/MM/DD.

    expect(received).toBe(expected) // Object.is equality

    Expected: "2020/12/30"
    Received: "2020/12/31"

       8 | 
       9 |     const response = convertDateToString(target);
    > 10 |     expect(response).toBe(want);
         |                      ^
      11 |   });
      12 | 
      13 | })

      at Object.<anonymous> (src/tests/utils_index.test.ts:10:22)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        3.236 s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

※失敗例では、want変数を2020/12/31から2020/12/30に変更して実行しています。

さいごに

今回は、以下の記事をまとめました。

  • yarnでts-jestをインストールするコマンド
  • Makefileの設定とmakeコマンドでのテスト実行
  • テスト対象関数の作成と解説
  • テストコード作成と解説
  • テストの成功例と失敗例

最後までありがとうございます。
何かツッコミあれば、Twitter等でご連絡頂けると嬉しいです!

参考

PON

PON

30代で、完全未経験から独学でWeb系エンジニアになった人。 前職では、超絶ブラック企業にはまり込んでしまい、年間1200時間の残業をしていたが、娘が生まれたことで我に返って転職を決意。 現在は、大阪にあるベンチャー企業の自社開発プロジェクトで、リードエンジニアとして奮闘中。 主戦場はバックエンドで、Pythonでのデータ分析が武器。 とは言いつつ、SPAのフロントエンドを実装したり、インフラ設計したり、スクラム開発でプロジェクト運営したりするなんでも屋。 いつも、ググってきては誰かが書いてくれた記事を見て開発していたが、もらってばかりでなく世の中に返すこともしたいと思い、技術ブログをはじめる。 妻と1歳になる娘の3人暮らし。 最近は一日一食。 何かご用件がある方は、TwitterのDMからどうぞ。