本記事では、Jestの環境構築と実行方法について紹介します。
以下、参考にしたサイトと書籍です。
公式サイト
書籍
前提条件
- Node.jsの環境があること
Node.jsの環境がない方は、フロントエンド開発のためのJavaScript入門 – Node.jsの環境を構築をご覧ください。
目次
Jestのインストール
Jestをインストールするために、まずプロジェクトを作成します。
作業フォルダを作成し、作業フォルダに移動後、以下のコマンドを入力します。
npm init -yコマンドを実行すると、フォルダ内にpackage.jsonファイルが作成されます。
これでJestをインストールするための準備が整いました。
Jestをインストールしていきます。
作業フォルダで以下のコマンドを入力します。
npm install --save-dev jestこれで、Jestのインストールが完了しました。
最後に、package.jsonを以下のように修正してください。
{
・・・
"scripts": {
"test": "jest"
},
・・・
}テストの実行
まず、作業フォルダ内にテスト対象のコードを作成します。
今回は、単純に引数を2倍にして返す関数をテストしたいと思います。
作業フォルダ内にファイルを作成し、以下のコードを入力してください。
function double(n) {
return n * 2;
}
module.exports = double;次に、テストコードを作成します。
作業フォルダ内に、double.test.jsファイルを作成し、以下のコードを入力してください。
const double = require("./double");
test("5 * 2 = 10", () => {
expect(double(5)).toBe(10);
});入力が終わったら、以下のコマンドを入力してください。
npm test以下のように表示されれば、OKです。
まとめ
Jestは公式サイトの記載の通り、React、Vue、Node、TypeScriptなどに対応しているので、フロントエンド、バックエンド開発のどちらでも活用することが出来ます。
テストコードを初めて書き始めたときは、時間がかかるし、途中で面倒くさくなることもあります。
私も最初はそうでした。
しかし、デグレを早期に発見出来たり、リファクタリングへの恐怖が無くなったりといった体験をすると、テストコードを書くことが楽しくなりました。
また、テストコードを書くと、コードの設計が良くなるなど、メリットがたくさんあります。
皆さんもこれを機に、
「テストコードを書くことは特別なことではなく、当たり前のことだ」
と思えるようになるまで学習してみませんか？
以上で、今回は終了です。
次回は、テストコードの書き方と実行結果の見方を紹介します。