今回は、間違いの例です。
最近、下記を参考にReactを使ったWebアプリの作り方を勉強をしています。
【2025年最新版】0からReactを勉強するならこのロードマップに従え！ #TypeScript - Qiita
現在テストを書こうとしていますが、思ったように動きませんでした。
どこが悪いか分からないので、理解が進んだ時のために今回試したことを残しておきます。
- node_moduleをインストールする
- jestの設定
- jestとReact Testing Libraryを連携
- テストを書いてみる
- レンダリングもテストしてみる
- どうして？？？
- もう1度だけ試す
- 参照
- ちなみに
node_moduleをインストールする
# Jestのインストール $ npm install --save-dev jest # React Testing Libraryのインストール $ npm install --save-dev @testing-library/react @testing-library/dom
jestの設定
コマンドを追加する
package.jsonのscriptsに下記を追加
"scripts": { "test": "jest" }
jestとReact Testing Libraryを連携
ルートディレクトリにjest.config.cjsというファイルを追加し、下記を記入する
module.exports = {
setupFilesAfterEnv: ["@testing-library/jest-dom"],
testEnvironment: "jest-environment-jsdom",
};
テストを書いてみる
テストケースの作成
srcディレクトリにtestディレクトリを追加し、その中にtruthy.test.jsを作成する
describe('true is truthy and false is falsy', () => {
test('true is truthy', () => {
expect(true).toBe(true);
});
test('false is falsy', () => {
expect(false).toBe(false);
});
});
テストしてみる
ターミナルで下記を実行
# 実行 $ npm test # 結果 > my-study-log@0.0.0 test > jest PASS src/test/truthy.test.js true is truthy and false is falsy √ true is truthy (1 ms) √ false is falsy Test Suites: 1 passed, 1 total Tests: 2 passed, 2 total Snapshots: 0 total Time: 0.52 s Ran all test suites.
通った。
レンダリングもテストしてみる
1回目
テストケース
testディレクトリにApp.test.jsを追加し、npm testしてみる
import React from 'react'; import { render } from '@testing-library/react'; import App from './App'; describe('App', () => { test('renders App component', () => { render(<App />); }); });
実行
# 実行 $ npm test # 結果 > my-study-log@0.0.0 test > jest FAIL src/test/App.test.js ● Test suite failed to run Jest encountered an unexpected token Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax. Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration. By default "node_modules" folder is ignored by transformers. Here's what you can do: • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it. • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config. • If you need a custom transformation, specify a "transform" option in your config. • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option. You'll find more details and examples of these config options in the docs: https://jestjs.io/docs/configuration For information about custom transformations, see: https://jestjs.io/docs/code-transformation Details: SyntaxError: C:\React\my-study-log\src\test\App.test.js: Support for the experimental syntax 'jsx' isn't currently enabled (8:12): 6 | describe('App', () => { 7 | test('renders App component', () => { > 8 | render(<App />); | ^ 9 | }); 10 | }); Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation. If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing. If you already added the plugin for this syntax to your config, it's possible that your config isn't being loaded. You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration: npx cross-env BABEL_SHOW_CONFIG_FOR=C:\React\my-study-log\src\test\App.test.js <your build command> See https://babeljs.io/docs/configuration#print-effective-configs for more info.
めっちゃ怒られた…
2回目
テストケース
<という文字が認識できないらしいので、<に変えて実行してみた
import React from 'react'; import { render } from '@testing-library/react'; import App from './App'; describe('App', () => { test('renders App component', () => { render(<App />); }); });
実行
# 実行 $ npm test # 結果 > my-study-log@0.0.0 test > jest FAIL src/test/App.test.js ● Test suite failed to run Jest encountered an unexpected token ～以下略～
…変わらない。
3回目
ちょっと変える
エラー文を読むと下記のように言っているので、@babel/preset-reactも追加してみる。
Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.
（変換を有効にするために、Babelの設定ファイルの
presetsセクションに@babel/preset-reactを追加してください）
# `@babel/preset-react`を追加してみる $ npm i -D @babel/preset-react
ルートディレクトリにbabel.config.jsonを作成する
{ "presets": ["@babel/preset-react"] }
テストケース
2回目と同じなので省略。
実行
# 実行 $ npm test # 結果 > my-study-log@0.0.0 test > jest FAIL src/test/App.test.js ● Test suite failed to run Jest encountered an unexpected token ～以下略～
…変わらない（2度目）。
どうして？？？
試しに、こちら↓を参考に新しくプロジェクトを作成してみたら、レンダリングのテストも出来た。
Reactコンポーネントのテストを書こう | TypeScript入門『サバイバルTypeScript』
違いが分からないので、とりあえずプロジェクトを作り直そうかな…
もう1度だけ試す
4回目
テストケース
成功したケースを参考に、書き方を変えてみる
（よく分かってないから間違いはあるかもだけど…）
import React from 'react'; import { render } from '@testing-library/react'; import App from './App'; test("タイトルが取得できる", async () => { render(<App />); const title = screen.getByText("学習記録アプリ"); expect(title).toHaveTextContent("学習記録アプリ"); });
実行
# 実行 $ npm test # 結果 > my-study-log@0.0.0 test > jest FAIL src/test/App.test.js ● Test suite failed to run Jest encountered an unexpected token ～以下略～
…変わr（3度目）。だめだこりゃ。
参照
ちなみに
現在作っている課題のアプリはこちらです。
アプリ
GitHub
GitHub - yuricks7/my-study-log-v2: Reactの練習用リポジトリv2です。 · GitHub
