More than 1 year has passed since last update.

TypeScript jestで単体テストを書く

Posted at 2023-08-05

最近、TypeScriptに入門しました。
jestについて個人的な備忘録として記事を執筆しました。

TypeScriptでjestを使ったテストの実行方法
jestの各種設定

javascriptのテストを実施するためのフレームワーク。
この記事ではTypescriptのjestの記事となっていますが、ReactやVueのテストなどもjestで行えます。

まずはNode.jsのインストールを行う
https://nodejs.org/ja
上がnode.jsの公式サイト。
こちらからダウンロードを行う。

Node.jsをインストールした後は
指定のフォルダで

npm init

プロジェクトの新規作成

npm install typescript

TypeScriptをインストール
※npm install時に -g オプションを付けると、グローバルでインストールされる。
ただ、各PJでバージョンを分けたい場合は-gオプションを付けずにインストールを行う。

npm install jest

npm install ts-jest

npm install @types/jest

ts-jestを入れることでTypeScriptを一々、コンパイルせずにテストが行えるようになる。
@types/jestはテストコードの型チェックを行いたい場合に必要になるのでインストール。

npx ts-jest config:init

上のコマンドを実行すると、jest.config.jsが生成される。
この設定ファイルを以下に変更。

jest.config.js

module.exports = {
  preset: 'ts-jest',
  testEnviroment: 'node'
}

TypeScriptのコードをテストしたい場合はpresetの値をts-jestにする必要がある

また、テストから除外したい場合は

jest.config.js

testPathIgnorePatterns: ["指定したディレクトリ"]

デフォルトではnode_modulesフォルダが除外されている。

test.tsがファイル名に含まれているものがテストコードのファイルになる。
例として挙げるなら、sample.test.tsのような感じ。
テスト対象となるソースコードはexportし、テストコードのファイルでimportする必要がある。

package.json

"scripts": {
  "test": "jest"
}

package.jsonに上の記述を追加すると
npm run testでjestの実行が行えるようになる

jest.fnで関数をmock化できる

sample.test.ts

(global as any).fetch = jest.fn(() =>
  Promise.resolve({
    'json' () => Promise.resolve({"hoge": "hogehoge"})
  })
);

これはfetchをmock化した例。

npm install jest-environment-jsdom

外部のHTMLファイルを読み込みたい場合はNode.jsのfsモジュールをrequireする。

jest.config.js

module.exports = {
  preset: 'ts-jest',
  testEnviroment: 'jsdom'
}

カバレッジを出力する場合は
テスト実行時に --coverageオプションを付けるだけ

jest --coverage