【TypeScript/Jest】JavaScript・TypeScriptのテスト環境を構築する
こんにちは、しきゆらです。
今回は、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
設定後、TSでテストを書くことを設定の中に追記します。
これにて設定は完了。
あとは雑にスクリプトとテストを書いて動かしてみます。
テストは、以下のような感じ。
ざっくりとした印象だとRSpecと同じような形で書けそうです。
詳しくは、公式ドキュメントを見てください。
一応日本語に翻訳されています: https://jestjs.io/ja/
ファイル構成はこんな感じ。
スクリプトはsrc
に置き、テストは__test__
にまとめています。
では実行してみます。
はい、問題なく実行できてテストをパスしていますね。
問題なさそうです。
まとめ
今回は、JavaScript/TypeScriptのテスト環境を作る手順をメモしました。
毎回調べてよくわからないなぁと思っていましたが、整理してみると意外とそこまで複雑ではなさそうです。
今回は、ここまで。
おしまい
ディスカッション
コメント一覧
まだ、コメントがありません