初めに
元医療職 → WEB制作者がReact開発で詰まった箇所を日々発信しています！
現在はJISOUというコミュニティに所属してReact開発を学習中。
簡単なプロジェクト作成後にテストを実行したところ、「Unexpected token (16:4)...」というエラーが返ってきました。
コードを見返しても誤っているところはなかったのですが、簡単な落とし穴に引っかかっていたためまとめます。
今回のゴール
App.tsxファイル内でdate-testid="table"の属性を持つ要素があることを、テストによって確認したい。
かなりシンプルなテストです。
今回の問題点
コードは正しいのですが、npm run testを実行しても上記のエラーが返ってきます。
このエラーはTypeScriptの型注釈が、JavaScriptファイルとして誤って解釈されている時に出るエラーだそうです（おそらく他にもこのエラーが表示される原因はありますが、今回はTypescriptとして認識されていないことが原因です）。
今回のエラーの原因は「jest.config.js」ファイルがルートディレクトリ直下ではなく、srcフォルダ内に格納されていました。
解決策
この問題の解決は「jest.config.js」ファイルをルートディレクトリ直下に移動することで解決できました。
基本的にプロジェクトの設定を記述するようなファイルは、ルートディレクトリ直下と覚えてよさそうです。
終わりに
毎回テストのエラーで悩まされますが、今回はとても初歩的なミスでした。
ですが初歩的なミスであるほど、意識の外にあって気付けないので今回このミスをしたことで次からは意識内に入ってくるかと思います！
これからもどんどんミスして経験値増やしていきます！