jest で TypeScript のテストを書く場合の最低限度の設定など

gistfile1.md

jest で TypeScript のテストを書く場合の最低限度の設定など

Next.js のチュートリアルをTypeScript化まで完了したので、その先をということでチュートリアルで作ったものに対してユニットテストを書きたくなったので jest を導入した。最小構成だとこんな感じになると思う。

ちなみに今回の内容だと Next.js 特有の仕組みとかも使ってないし React も使ってないので、「jest で TypeScript のテストを書く」というタイトルにした。

（ReactやNextのコンポーネントをテストするなら React Testing Library を使うのが良さそう。これはまた次回。）

インストール

$ npm install --save-dev jest ts-jest @types/jest

• jest : テストライブラリ本体
• ts-jest : jestでTypeScriptを動かすのに必須
• @types/jest : VSCode で型宣言が無いとか怒られるので入れておく。たぶんESLintとかでも、これ入れてないと型エラーになりそう。

ts-jest 入れないでテストすると SyntaxError: Cannot use import statement outside a module とかで落ちる。詳細: preset: ts-jest とは

jest.config.js に設定を書く

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

テスト書いて動かす

テスト対象は utils/date.ts

import { parseISO, format } from "date-fns";

export const formatDate = (dateString: string, dateFormat: string) => {
  return format(parseISO(dateString), dateFormat);
};

テストコード: __tests__/utils/date.ts

import { formatDate } from "../../utils/date";

test("日付が正しくフォーマットされること", () => {
  expect(formatDate("2021-06-17", "LLLL d, yyyy")).toBe("June 17, 2021");
});

実行結果

$ npm run test

> learn-starter@0.1.0 test
> jest

 PASS  __tests__/utils/date.test.ts
  ✓ 日付が正しくフォーマットされること (6 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.051 s
Ran all test suites.

テストコードをどこに置くか問題

jest の自動検知は

• **/__tests__/** 以下の js|ts|jsx|tsx` ファイル
• **.test.js または **.spec.js というファイル名（拡張子は上記同様tsとかjsxとかも可）

トップレベルに __tests__ 作る派もいれば、テスト対象と同一階層に置く派もいる模様。

例えばこんな感じ

/ComponentName
├── /hooks
│   ├─ useComponentName.ts
├── ComponentName.tsx
├── ComponentMame.test.tsx
├── ComponentName.module.scss
├── index.tsx

とりあえず自分はトップレベルに __tests__ 作る方向で。