RailsのSPAにJestを導入してみた話

この記事の内容

業務で、RailsのSPAを作っています。フロントのテストフレームワークとしてJestを導入することになり、チームで探りつつ実装したので、その記録をまとめたいと思います。
なお、各種バージョンは以下の通りです。

• Rails ... 6.1.0
• Jest ... 27.4.7
• node.js ... 14.19.0

必要なライブラリの導入

必要なライブラリを導入します。TypeScriptを使用していたので、Jestだけではなく @type/jest も必要でした。

$ yarn add --dev jest @types/jest

そして package.json の script に以下を追加します。

package.json

{
  "scripts": {
    "test": "jest"
    ...
  },
  ...
}

設定、ディレクトリ構成

この時点で yarn testを実行しようとすると、 config/webpack/test.js を実行しようとしてテストが失敗します。これはこちらの記事によると以下の理由からだそうです。

これは、Jestがプロジェクト内のテストファイルを探索する方法が原因です。基本的にはプロジェクト全体のうち.spec.jsか.test.jsにマッチするすべてのファイルを実行します。ここではテストファイルが*.test.jsとマッチしたので、テストとして実行されようとしていたのです。

そのため、package.json に以下の記述を記載し、Jestがファイルを検索するために使用するディレクトリのパスを指定します。

package.json

{
  ...
  "jest": {
    "roots": [
      "<rootDir>/app/javascript"
    ]
  }
}

<RootDir>は公式の記載によると「Jestの設定ファイルかpackage.jsonを含むディレクトリ、もしくは設定がひとつもない時はpwdのディレクトリ」を表す記述」だそうです。

最初のテスト

ここでJestが動作するはずなので、最初のテストを書きます。
先ほどrootsで指定した/app/javascript下に、__tests__というディレクトリを作って、サンプルのファイルを書きます。

/app/javascript/__tests__/example.test.ts

describe('サンプルテスト', () => {
  test('trueになる', () => {
    expect(true).toBeTruthy()
  })
})

フロントエンドをざっくり学んだ時に使用したこちらのテキストによると、Jestでは、describe()という関数でテストケースをまとめ、そのブロック内にtest()関数を書いてテストをしていくようです。

describe()やtest()の第一引数に「何をテストするか」を書くことで可読性が上がります。
以上で、テストが動くことが確認できると思います！

おまけ：CircleCIでも実行

テスト自体の設定はこれで終わりなのですが、今回はCIツールへの接続も行いました。
CIのrunで実行するコマンドの中で、先ほどpackage.jsonで設定したyarn testを実行すれば良いだけなのですが、node.jsのバージョンが合わなかったりしてエラーになったので、コマンド中でyarn installも実行しました。

.circleci/config.yml

- run:
   name: Jestの実行
   command: |
    yarn install
    yarn test

※本当はyarn installとyarn testの記載は離れていたり、キャッシュを用いて処理を高速化するような記載もあるのですが、詳細割愛します。

その他

これからReactで実装している諸々のテストの記載をしていくので、何か気づきがあれば投稿したいです

参考資料など