Vitestを使ってテストを行なおうとしたが、「RollupError: Parse failure: Expression expected」というエラーが発生した

はじめに

改修中の学習記録アプリにVitestを導入してテストを行なおうとしたときに発生した出来事。

問題

まずは「npx vitest」コマンドで作成したテストコードがちゃんとパスされるか試したところ、タイトルのエラーが発生した。

 FAIL  src/tests/LearnLog.test.js [ src/tests/LearnLog.test.js ]
RollupError: Parse failure: Expression expected
At file: /src/tests/LearnLog.test.js:7:11
  File: /src/tests/LearnLog.test.js:7:11
  5  |  describe("学習記録アプリのテスト", () => {
  6  |    test("タイトル表示確認", async () => {
  7  |      render(<LearnLog />);
     |                   ^
  8  |      expect(await screen.findByText("学習記録一覧")).toBeInTheDocument();
  9  |    });
 ❯ getRollupError node_modules/rollup/dist/es/shared/parseAst.js:401:41
 ❯ convertProgram node_modules/rollup/dist/es/shared/parseAst.js:1107:26
 ❯ parseAstAsync node_modules/rollup/dist/es/shared/parseAst.js:2093:106
 ❯ ssrTransformScript node_modules/vite/dist/node/chunks/config.js:15374:9
 ❯ loadAndTransform node_modules/vite/dist/node/chunks/config.js:22701:64

解決方法

テストファイルの拡張子を「.js」から「.jsx」に変更すると、無事テストがパスされました。

 ✓ src/tests/LearnLog.test.jsx (1 test) 673ms
   ✓ 学習記録アプリのテスト (1)
     ✓ タイトル表示確認  670ms

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  21:14:02
   Duration  1.62s (transform 62ms, setup 140ms, import 77ms, tests 673ms, environment 595ms)

 PASS  Waiting for file changes...
       press h to show help, press q to quit

テストをしたかったのはアプリ自体、「.jsx」ファイルだったため、テストファイルもそれに合わせる必要があるようです。

おわりに

振り返るとかなり単純でした。だからいくら調べても逆に有益な情報が中々見つからなかったのかなと思いました。

今後も同じような状況に遭遇したら、やみくもに調べる手を止めて立ち止まって考えてみようと思います。