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を以下で作ります。これは「1は1である」と確認してるだけです。
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().container.firstChild).toMatchSnapshot());
叩きます。
yarn test
正常に終了して、__tests__/__snapshots__/button.js.mapにファイルが作られていれば問題なさそうです。
上記の内容はこのリポジトリに置いてます。
