🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

3055閲覧

[React]○○.test.jsファイルがexperimental 'jsx' isn't currently enabled.エラーを吐く

moyong

総合スコア19

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/03/31 06:24

編集2021/04/02 09:21

前提・実現したいこと

React × Redux × Typescriptアプリでtestファイルを書いています。(jest × react-testing-library)
テストファイルの中身でエラーはないですしテストも動いていますが、VC CODE起動時にタイトルのエラーを吐きます。
VC CODEの仕様なのか、このエラー画面をクリックするとエラーが消えて、赤色にハイライトされていたファイルも通常の色に戻ります(まるで何事もなかったかのように)
イメージ説明

発生している問題・エラーメッセージ

Support for the experimental 'jsx' isn't currently enabled. ... ... Add @babel/preset-react to the 'presets' section of your Babel config to enable transformation. If you want to leabe it as-is, add @babel/plugin-syntax-jsx to the 'plugins' section to enable parsing.

該当のソースコード

テストファイル↓

import React from "react"; import { render, screen, cleanup } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { Provider } from "react-redux"; import { configureStore } from "@reduxjs/toolkit"; import userReducer from '../../features/userSlice'; import Auth from './Auth' describe('Auth', () => { let store; beforeEach(() => { store = configureStore({ reducer: { user: userReducer, }, }); }); it("Should render all the elements correctly", () => { render( <Provider store={store}> <Auth /> </Provider> ); screen.debug(); }); });

package.json↓

{ "name": "workout-journal", "version": "0.1.0", "private": true, "dependencies": { "@craco/craco": "^6.1.1", "@material-ui/core": "^4.11.3", "@material-ui/icons": "^4.11.2", "@material-ui/lab": "^4.0.0-alpha.57", "@reduxjs/toolkit": "^1.5.0", "@types/node": "^12.20.4", "@types/react": "^16.14.4", "@types/react-dom": "^16.9.11", "@types/react-redux": "^7.1.16", "axios": "^0.21.1", "firebase": "^8.2.9", "hover.css": "^2.3.2", "mime-types": "^2.1.29", "react": "^17.0.1", "react-calendar-heatmap": "^1.8.1", "react-dom": "^17.0.1", "react-redux": "^7.2.2", "react-scripts": "4.0.3", "react-tooltip": "^4.2.15", "typescript": "^3.8.3" }, "scripts": { "start": "craco start", "build": "craco build", "test": "craco test --env=jsdom --verbose", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@tailwindcss/postcss7-compat": "^2.0.3", "@testing-library/jest-dom": "^5.11.9", "@testing-library/react": "^11.2.5", "@testing-library/user-event": "^13.0.15", "@types/jest": "^26.0.21", "@types/react-calendar-heatmap": "^1.6.2", "autoprefixer": "^9.8.6", "node-sass": "^5.0.0", "postcss": "^7.0.35", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.3", "ts-jest": "^26.5.4" } }

試したこと

エラー文の通りyarn add @babel/preset-reactしましたが、create-react-appで作ったアプリなのでbabelの設定ファイルがなくて積んでしまいました...

yuki yanoさん

イメージ説明
調べた範囲では、CRAを使わなかった場合の解決策は「react-presetをinstallしてbabelの設定ファイルをいじる」ことのようです。
ただ僕の場合CRAを使ってアプリ作成していて(react-scripts": "4.0.3",)、ネット上に同様の質問はありますが回答がついておらず詰んでしまってます...

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

jsxを書いていそうなので、 Auth.test.jsx でないとJSXが解釈できなさそうです。
ひとまずjsxファイルにしてエラーが出るか見た方がよさそうです。

投稿2021/04/02 08:42

yuki-yano

総合スコア132

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

moyong

2021/04/02 09:17

ご回答ありがとうございます! テスト対象のコンポーネント `Auth.tsx`を`Auth.jsx`に修正しましたが変わりませんでした...
yuki-yano

2021/04/02 12:16

テスト対象ではなくて、テストファイルがjsxで書かれていると思うのですが、そちらを変えても変わりませんか?
moyong

2021/04/02 18:53

勘違いをしておりました! Auth.test.jsxにしてみても、Auth.test.tsxにしてみてもエラー内容に変化なしでした
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問