【TypeScript/Jest】JavaScript・TypeScriptのテスト環境を構築する

2022年6月12日JavaScript

こんにちは、しきゆらです。
今回は、JS/TS環境でテストを書いて実行できる環境を作る手順をメモしておきます。

個人的に、JSの世界は定期的に天変地異が起こってこれまでデファクト的なツールが使われなくなるイメージがあり、あまり追えていないのが現状です。
そんな中、GASを書くことが増えた影響でJavaScript/TypeScriptを書くようになり、JS側の環境構築をちょこちょこやることが増えたのと、テストを書きたいと思って毎回同じことを調べている気がしたのでここに残しておこう、という魂胆です。

JavaScriptのテストフレームワーク

そもそも、JSのテストフレームワークにはどんなものがあるのか、というところからわからなかったのでちょっと調べてみました。
調べてみると、最近はJestというものが強いらしいです。

参考: https://2021.stateofjs.com/ja-JP/libraries/mobile-desktop/

なお、上記サイトではグラフィカルにJSの環境について知ることができるので、暇な時に見てみると面白いかもしれません。

Jestの環境構築

では、Jestの環境を作っていきます。
なお、TS自体の環境はすでにあることを前提としています。

必要なものは以下のコマンドでインストール。
yarn add typescript jest ts-jest ts-node @type/jest

続いて、初期設定を行っていきます。
なお、細かい設定に関してはこちら。
https://jestjs.io/ja/docs/configuration

$ yarn jest --init
 ✔ Would you like to use Typescript for the configuration file? … yes
 ✔ Choose the test environment that will be used for testing › node
 ✔ Do you want Jest to add coverage reports? … no
 ✔ Which provider should be used to instrument code for coverage? › babel
 ✔ Automatically clear mock calls, instances, contexts and results before every test? … no

設定後、TSでテストを書くことを設定の中に追記します。

export default {
  ~~~~~~~~~~~~~~~~~~~
  // 以下を追記
  preset: "ts-jest",
}

これにて設定は完了。
あとは雑にスクリプトとテストを書いて動かしてみます。

const sum = (a: number, b: number): number => a + b;

テストは、以下のような感じ。
ざっくりとした印象だとRSpecと同じような形で書けそうです。
詳しくは、公式ドキュメントを見てください。
一応日本語に翻訳されています: https://jestjs.io/ja/

import { sum } from "../src/temp";
 
 it("test", () => {
    let a = 1;
    let b = 2;
    expect(sum(a, b)).toEqual(a + b);
 })

ファイル構成はこんな感じ。
スクリプトはsrcに置き、テストは__test__にまとめています。

$ tree -L 2
 ├── __test__
 │   └── temp.test.ts
 ├── docker-compose.yml
 ├── jest.config.ts
 ├── node_modules
 ├── package.json
 ├── src
 │   └── temp.ts
 ├── tsconfig.json
 └── yarn.lock

では実行してみます。

$ > yarn test 
 yarn run v1.22.18
$ jest
 PASS  __test__/temp.test.ts

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.723 s, estimated 1 s
Ran all test suites.
Done in 2.02s.

はい、問題なく実行できてテストをパスしていますね。
問題なさそうです。

まとめ

今回は、JavaScript/TypeScriptのテスト環境を作る手順をメモしました。
毎回調べてよくわからないなぁと思っていましたが、整理してみると意外とそこまで複雑ではなさそうです。

今回は、ここまで。
おしまい

Posted by しきゆら