Babel と使う

React の JSX にも対応した環境です。

依存インストール

以下で必要な依存をインストールします。

yarn add -D jest babel-jest @babel/{core,preset-env,preset-react} 

必須ファイル作成

.babelrcファイルを作成し、テスト時に JSX 部分がトランスパイルされるようにします。この中身は以下のようにします。

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

以上で準備完了です。

テストしてみる

__tests__/tada.jsを以下で作ります。これは「11である」と確認してるだけです。

echir __tests__ && \o 'test(\'🎉\', () => expect(1).toBe(1))' > __tests__/tada.js

__t できたら早速jestを叩きます。PASS`と出ればうまくできてます!

yarn jest
# PASS  __tests__/tada.js

React SnapShot テスト

次は__tests__/button.jsを作ります。以下の内容ではrenderに渡した結果のスナップショットを取るテストです。React にも対応できていればこのテストも通るハズです。

import React from 'react';
import { render } from '@testing-library/react';

test('button', () => expect(render(<button />).container.firstChild).toMatchSnapshot());

叩きます。

yarn test

正常に終了して、__tests__/__snapshots__/button.js.mapにファイルが作られていれば問題なさそうです。

上記の内容は[このリポジトリ]に置いてます。

TypeScript と使う

依存のインストール

以下の3つをインストールします。

yarn add -D @types/jest jest ts-jest 

設定ファイルを作る

以下はsrc/以下のすべての.tsまたは.tsxファイルをテストの対象にするという意味になる設定です。その時の環境に合わせてtestRegexを書き換えることでいろんな環境に合わせれます。

module.exports = {
  moduleFileExtensions: ['ts', 'tsx', 'js'],
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  testRegex: 'src/.*(/__tests__/.*|.test).tsx?$',
};

テストを試す

適当にsrc/index.test.ts辺りでこんなファイルを作ります。

test('test', () => {
  expect(1).toBe(1);
});

そしてyarn jestでテストが通れば完了です。

tsconfig.json を指定する

global['ts-jest'].tsConfigに使いたいtsconfig.xxx.jsonへのパスを渡すとその設定でテストを実行することができます。

module.exports = {
  globals: {
    'ts-jest': {
      tsConfig: 'tsconfig.test.json',
      diagnostics: true,
    },
  },
};

tsconfig の paths を jest でも効かせる

moduleNameMapperを指定します。

```js module.exports = { moduleNameMapper: { foo: '/src/foo/src/index.ts' } };

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

インストール

以下のうちどちらかを実行でインストールできます。

npm install --global jest
yarn global add jest

実行する

グローバルの Jest を実行するには設定ファイルを指定する必要があります。設定ファイルの指定には--configオプションを使います。

jest --config=~/a-project/jest.config.js

--config指定が面倒くさい場合は、shell の設定などでエイリアスとしてglobal-jestjest --config=~/a-project/jest.config.jsのように設定しておくと楽かもしれません。

例えば、fishでの設定は以下のコマンドを実行すれば完了します

echo "alias global-jest='jest --config=$HOME/environment/workbook/jest.config.js'" >> ~/.config/fish/config.fish

bashの場合は~/.config/fish/config.fishの代わりに~/.bashrcに変えて実行します。

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

toBe

同じ格納場所を指しているかどうか

const obj = {};

expect(obj).toBe(obj);

上はパスしますが、いつからか下記のtoStrictEqualを使ってくださいというような警告が出るようになったので、toStrictEqualを使いましょう。

toStrictEqual

同じ格納場所じゃなくていいが、中身がまったく同じかどうか。

const expected = {foo: 123};
const value = {foo: 123};

// ok
expect(expected).toEqual(value);

toEqual

同じ格納場所じゃなくていいが、中身が同じかどうか。ただし値がundefinedのプロパティに関しては無くても良い。

const expected = {foo: 123, bar: undefined};
const value = {foo: 123};

// ok
expect(expected).toEqual(value);

ちなみに順番は同じじゃなくても良し。

const expected = {foo: 1};
const value = {foo: 1};

// ok
expect({foo: 1, bar: 2}).toEqual({bar: 2, foo: 1});

toMatchObject

同じ格納場所じゃなくて良くて、中身も完全に同じじゃなくても良期待していないプロパティは含めては駄目です。

const expected = {foo: 1, bar: 2};
const value = {foo: 1};

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