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にファイルが作られていれば問題なさそうです。

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