<div class=n-md_h3-box><a href=#グローバルにインストールして使う+インストール aria-label=インストールのアンカー class=n-md_h3-anchor></a><h3 id=グローバルにインストールして使う+インストール class=n-md_h3-heading>インストール</h3></div>以下のうちどちらかを実行でインストールできます。<pre><code class=language-sh>npm install --global jest
yarn global add jest
</code></pre><div class=n-md_h3-box><a href=#グローバルにインストールして使う+実行する aria-label=実行するのアンカー class=n-md_h3-anchor></a><h3 id=グローバルにインストールして使う+実行する class=n-md_h3-heading>実行する</h3></div>グローバルの Jest を実行するには設定ファイルを指定する必要があります。設定ファイルの指定には<code>--config</code>オプションを使います。<pre><code class=language-sh>jest --config=~/a-project/jest.config.js
</code></pre><code>--config</code>指定が面倒くさい場合は、shell の設定などでエイリアスとして<code>global-jest</code>で<code>jest --config=~/a-project/jest.config.js</code>のように設定しておくと楽かもしれません。例えば、<code>fish</code>での設定は以下のコマンドを実行すれば完了します<pre><code class=language-sh>echo "alias global-jest='jest --config=$HOME/environment/workbook/jest.config.js'" &gt;&gt; ~/.config/fish/config.fish</code></pre><code>bash</code>の場合は<code>~/.config/fish/config.fish</code>の代わりに<code>~/.bashrc</code>に変えて実行します。

グローバルにインストールして使う

React の JSX にも対応した環境です。<div class=n-md_h3-box><a href=#Babel_と使う+依存インストール aria-label=依存インストールのアンカー class=n-md_h3-anchor></a><h3 id=Babel_と使う+依存インストール class=n-md_h3-heading>依存インストール</h3></div>以下で必要な依存をインストールします。<pre><code class=language-sh>yarn add -D jest babel-jest @babel/{core,preset-env,preset-react} 
</code></pre><div class=n-md_h3-box><a href=#Babel_と使う+必須ファイル作成 aria-label=必須ファイル作成のアンカー class=n-md_h3-anchor></a><h3 id=Babel_と使う+必須ファイル作成 class=n-md_h3-heading>必須ファイル作成</h3></div><code>.babelrc</code>ファイルを作成し、テスト時に JSX 部分がトランスパイルされるようにします。この中身は以下のようにします。<pre><code class=language-json>{
 "presets": [
 "@babel/preset-env",
 "@babel/preset-react"
 ]
}
</code></pre>以上で準備完了です。<div class=n-md_h3-box><a href=#Babel_と使う+テストしてみる aria-label=テストしてみるのアンカー class=n-md_h3-anchor></a><h3 id=Babel_と使う+テストしてみる class=n-md_h3-heading>テストしてみる</h3></div><code>__tests__/tada.js</code>を以下で作ります。これは「<code>1</code>は<code>1</code>である」と確認してるだけです。<pre><code class=language-sh>echir __tests__ &amp;&amp; \o 'test(\'🎉\', () =&gt; expect(1).toBe(1))' &gt; __tests__/tada.js
</code></pre><code>__t できたら早速</code>jest<code>を叩きます。</code>PASS`と出ればうまくできてます！<pre><code class=language-sh>yarn jest
# PASS __tests__/tada.js
</code></pre><div class=n-md_h3-box><a href=#Babel_と使う+React_SnapShot_テスト aria-label="React SnapShot テストのアンカー" class=n-md_h3-anchor></a><h3 id=Babel_と使う+React_SnapShot_テスト class=n-md_h3-heading>React SnapShot テスト</h3></div>次は<code>__tests__/button.js</code>を作ります。以下の内容では<code>render</code>に渡した結果のスナップショットを取るテストです。React にも対応できていればこのテストも通るハズです。<pre><code class=language-jsx>import React from 'react';
import { render } from '@testing-library/react';

test('button', () =&gt; expect(render(&lt;button /&gt;).container.firstChild).toMatchSnapshot());
</code></pre>叩きます。<pre><code class=language-sh>yarn test
</code></pre>正常に終了して、<code>__tests__/__snapshots__/button.js.map</code>にファイルが作られていれば問題なさそうです。上記の内容は[このリポジトリ]に置いてます。

Babel と使う

<div class=n-md_h3-box><a href=#TypeScript_と使う+依存のインストール aria-label=依存のインストールのアンカー class=n-md_h3-anchor></a><h3 id=TypeScript_と使う+依存のインストール class=n-md_h3-heading>依存のインストール</h3></div>以下の3つをインストールします。<pre><code class=language-sh>yarn add -D @types/jest jest ts-jest </code></pre><div class=n-md_h3-box><a href=#TypeScript_と使う+設定ファイルを作る aria-label=設定ファイルを作るのアンカー class=n-md_h3-anchor></a><h3 id=TypeScript_と使う+設定ファイルを作る class=n-md_h3-heading>設定ファイルを作る</h3></div>以下は<code>src/</code>以下のすべての<code>.ts</code>または<code>.tsx</code>ファイルをテストの対象にするという意味になる設定です。その時の環境に合わせて<code>testRegex</code>を書き換えることでいろんな環境に合わせれます。<pre><code class=language-sh>module.exports = {
 moduleFileExtensions: ['ts', 'tsx', 'js'],
 transform: {
 '^.+\\.tsx?$': 'ts-jest',
 },
 testRegex: 'src/.*(/__tests__/.*|.test).tsx?$',
};</code></pre><div class=n-md_h3-box><a href=#TypeScript_と使う+テストを試す aria-label=テストを試すのアンカー class=n-md_h3-anchor></a><h3 id=TypeScript_と使う+テストを試す class=n-md_h3-heading>テストを試す</h3></div>適当に<code>src/index.test.ts</code>辺りでこんなファイルを作ります。<pre><code class=language-ts>test('test', () =&gt; {
 expect(1).toBe(1);
});</code></pre>そして<code>yarn jest</code>でテストが通れば完了です。<div class=n-md_h3-box><a href=#TypeScript_と使う+tsconfig.json_を指定する aria-label="tsconfig.json を指定するのアンカー" class=n-md_h3-anchor></a><h3 id=TypeScript_と使う+tsconfig.json_を指定する class=n-md_h3-heading>tsconfig.json を指定する</h3></div><code>global[&#39;ts-jest&#39;].tsConfig</code>に使いたい<code>tsconfig.xxx.json</code>へのパスを渡すとその設定でテストを実行することができます。<pre><code class=language-js>module.exports = {
 globals: {
 'ts-jest': {
 tsConfig: 'tsconfig.test.json',
 diagnostics: true,
 },
 },
};
</code></pre><h4 id="tsconfig の paths を jest でも効かせる">tsconfig の paths を jest でも効かせる</h4><code>moduleNameMapper</code>を指定します。```js module.exports = { moduleNameMapper: { foo: &#39;<rootdir>/src/foo/src/index.ts&#39; } };</rootdir>

TypeScript と使う

<div class=n-md_h3-box><a href=#オブジェクト関連のメソッド+toBe aria-label=toBeのアンカー class=n-md_h3-anchor></a><h3 id=オブジェクト関連のメソッド+toBe class=n-md_h3-heading>toBe</h3></div>同じ格納場所を指しているかどうか<pre><code class=language-js>const obj = {};

expect(obj).toBe(obj);
</code></pre>上はパスしますが、いつからか下記の<code>toStrictEqual</code>を使ってくださいというような警告が出るようになったので、<code>toStrictEqual</code>を使いましょう。<div class=n-md_h3-box><a href=#オブジェクト関連のメソッド+toStrictEqual aria-label=toStrictEqualのアンカー class=n-md_h3-anchor></a><h3 id=オブジェクト関連のメソッド+toStrictEqual class=n-md_h3-heading>toStrictEqual</h3></div>同じ格納場所じゃなくていいが、中身がまったく同じかどうか。<pre><code class=language-js>const expected = {foo: 123};
const value = {foo: 123};

// ok
expect(expected).toEqual(value);
</code></pre><div class=n-md_h3-box><a href=#オブジェクト関連のメソッド+toEqual aria-label=toEqualのアンカー class=n-md_h3-anchor></a><h3 id=オブジェクト関連のメソッド+toEqual class=n-md_h3-heading>toEqual</h3></div>同じ格納場所じゃなくていいが、中身が同じかどうか。ただし値が<code>undefined</code>のプロパティに関しては無くても良い。<pre><code class=language-js>const expected = {foo: 123, bar: undefined};
const value = {foo: 123};

// ok
expect(expected).toEqual(value);</code></pre>ちなみに順番は同じじゃなくても良し。<pre><code class=language-js>const expected = {foo: 1};
const value = {foo: 1};

// ok
expect({foo: 1, bar: 2}).toEqual({bar: 2, foo: 1});
</code></pre><div class=n-md_h3-box><a href=#オブジェクト関連のメソッド+toMatchObject aria-label=toMatchObjectのアンカー class=n-md_h3-anchor></a><h3 id=オブジェクト関連のメソッド+toMatchObject class=n-md_h3-heading>toMatchObject</h3></div>同じ格納場所じゃなくて良くて、中身も完全に同じじゃなくても良いが、期待していないプロパティは含めては駄目です。<pre><code class=language-js>const expected = {foo: 1, bar: 2};
const value = {foo: 1};

// ok
expect(expected).toMatchObject({foo: 1});
// fail
expect(expected).toMatchObject({foo: 1, baz: 3});
</code></pre>

オブジェクト関連のメソッド

モック機能を使うと、<ul><li>モジュール外機能を簡略化</li><li>関数は何と共に何回呼ばれたか（<code>spy</code>）</li></ul>ができます。<div class=n-md_h3-box><a href=#モック+モジュール外機能を簡略化 aria-label=モジュール外機能を簡略化のアンカー class=n-md_h3-anchor></a><h3 id=モック+モジュール外機能を簡略化 class=n-md_h3-heading>モジュール外機能を簡略化</h3></div>例えばあるクラス<code>A</code>には、内部で API を通してデータを保存・取得するメソッドを持っていたとします。API には多分何かしらの制約を持ってるのではと思います。例えばこんな感じです。<ul><li>あるフィールドはユニークな値しか保存できない</li><li>レスポンスにランダムな<code>id</code>を返す</li><li>取得にはランダムな<code>id</code>を使う</li></ul>このような時に実際に API 叩いてしまうと、決められた順番に実行しなければパスできない実質1つの巨大なテストケースになってしまいます。後処理が必要なものだったりするともっと大変。 API の周りの機能は完全にモジュール外の要素です。なのに実際に API まで叩かないといけないのか。 特にユニットテストレベルではその辺までしっかりする必要性は薄いです。なので、この辺(+α)を以下のような決めた値を返すだけのスタブに変えてしまいます。<ul><li>保存できる</li><li>レスポンスに<code>id</code>を<code>byMVc</code>として返す</li><li><code>id</code>が何でも取得できる</li><li>まとめて取得した場合は2件データが入っている</li></ul>Jest にはこのような既存のモジュールをモック化するいくつかの機能を持ってます。<h4 id=jest.mock>jest.mock</h4>もしあるモジュールがエクスポートしてる機能をまとめてモック化したいなら<code>jest.mock(path)</code>を使います。これは関数はもちろんオブジェクトが持ってるメソッドなどをすべて<code>undefined</code>を返すモック（<code>spy</code>）に書き換えます。例えば開発しているモジュール<code>my-client.js</code>が以下のような実装だとします。<pre><code class=language-js>const fetch = require('cross-fetch');

module.exports = class MyClient {
 constructor(token) {
 this.token = token;
 }

 /**
 * データ取得
 * @returns {Promise&lt;Object[]&gt;}
 */
 get() {
 return fetch(/* url */'...').then(res =&gt; res.json());
 }

 /**
 * データ保存
 * @returns {Promise&lt;number&gt;} 保存したデータの ID
 */
 save(data) {
 return fetch(/* url */'...', {method: 'POST'}).then(/* ... */).then(process);
 }
}
</code></pre>また、テストファイルでは以下のようにこのモジュールを使ってるとします。<pre><code class=language-js>const MyClient = require("./my-client");

test("get", async () =&gt; {
 const client = new MyClient("...");

 expect(client.get()).resolves.toMatchObject([
 { id: "a" },
 { id: "b" }
 ]);
});
</code></pre><code>my-client</code>は<code>cross-fetch</code>モジュールに依存しており、今の所<code>get</code>テストでは実際に<code>cross-fetch</code>を通してリクエストを飛ばしてしまいます。そしてレスポンスデータが2件の時だけパスできます。もしこの後保存 API を飛ばすと API 仕様によっては、このテストは失敗するようになるかもしれません。ここで<code>cross-fetch</code>をモック化して結果的に必ず<code>[{id: &#39;a&#39;}, {id: &#39;b&#39;}]</code>を返す関数にしてしまいます。それには以下のような行を挟みます。<pre><code class=language-js>const fetch = require('cross-fetch');
jest.mock('cross-fetch');

fetch.mockResolvedValueOnce({
 json: () =&gt; [{ id: "a" }, { id: "b" }]
});
</code></pre><code>mockResolvedValueOnce(value)</code>は1度だけ<code>Promise.resolve(value)</code>を返すモック関数化できます。<code>my-client</code>の中の<code>get</code>関数は、単に取得したデータを返すだけなので、これで常に<code>get</code>テストが通るようになります。上記のテストではテストファイルで直接モックを作りました。しかし中にはいくつものモック関数をテストファイルの中で作る必要があったり、何度も同じことを書く必要があったりで使いまわしたい場面がでてくるかもしれません。 そのような場合にはマニュアルモックが使えます。<h4 id=マニュアルモック>マニュアルモック</h4>マニュアルモックは、テストファイルと同じ階層に<code>__mocks__/cross-fetch.js</code>のように<code>__mocks__/</code>の中にモジュール名ファイルを入れることで、<code>jest.mock(&#39;cross-fetch&#39;)</code>時にそのファイルに書かれた内容でモック化してくれる機能です。例えば先程の<code>cross-fetch</code>と同様のマニュアルモックを作ると以下のようになります。<pre><code class=language-js>const fetch = jest.genMockFromModule("cross-fetch");

fetch.mockResolvedValueOnce({
 json: () =&gt; [{ id: "a" }, { id: "b" }]
});

module.exports = fetch;
</code></pre>これからは<code>jest.mock(&#39;cross-fetch&#39;)</code>とすると<code>fetch</code>した時に<code>Promise.resolve([{ id: &quot;a&quot; }, { id: &quot;b&quot; }])</code>が返されるようになりました。<div class=n-md_h3-box><a href=#モック+モック関数 aria-label=モック関数のアンカー class=n-md_h3-anchor></a><h3 id=モック+モック関数 class=n-md_h3-heading>モック関数</h3></div>先程出てきた<code>mockResolvedValueOnce(value)</code>は「1度だけ<code>Promise.resolve(value)</code>を返す」という関数にするものでしたが、他にも色々あります。<code>mockResolvedValue(value)</code>は1度じゃなく常に<code>Promise.resolve(value)</code>を返すようにします。同じように<code>mockRejectedValue</code>,<code>mockRejectedValueOnce</code>や<code>mockReturnValue</code>と<code>mockReturnValueOnce</code>があり、それぞれ<code>Promise.reject(value)</code>と<code>value</code>版です。 また完全に自分で実装する<code>mockImplementation(fn)</code>と<code>mockImplementationOnce(fn)</code>もあります。引数の<code>fn</code>は単なる関数で、モック関数が呼ばれた時に単にそれが呼ばれ結果が戻り値で返ります。モックは受け取った引数や戻り値を覚えています。それらはそれぞれ<code>mock.calls</code>と<code>mock.results</code>を通して取得できます。例えば<code>mock.calls[0][1]</code>で1回目実行時の第2引数、<code>mock.results[0]</code>で1回目実行時の戻り値のような感じです。上記の<code>mock.calls</code>や<code>mock.results</code>の履歴を消したい時は<code>mockReset</code>を実行します。また、<code>mockClear</code>を呼ぶとモックを<code>jest.fn()</code>直後の状態に戻せます。