質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
87.20%
Jest

Jestは、JavaScriptのテストフレームワークです。設定が不要で、高速且つ安全にテストを開始できます。コードカバレッジを生成できる他、テストスコープ外のオブジェクトを容易にモック化できるなど、豊富な機能によりテストの導入を簡単にします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

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

React.js

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

受付中

Cannot use JSX unless the '--jsx' flag is provided.がでてJestが使えない

senseIY
senseIY

総合スコア261

Jest

Jestは、JavaScriptのテストフレームワークです。設定が不要で、高速且つ安全にテストを開始できます。コードカバレッジを生成できる他、テストスコープ外のオブジェクトを容易にモック化できるなど、豊富な機能によりテストの導入を簡単にします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

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

React.js

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

0回答

0リアクション

1クリップ

253閲覧

投稿2022/08/14 11:33

編集2022/08/15 10:54

前提

バックエンド側(RoR)とフロントエンド側(React TypeScript *一部JavaScript)に分けてDockerで開発を行っています。フロントエンド側でテストを使用したいと思ったので、Jestをインストールし、テストを走らせましたが、なぜかテストファイルの初期値でもエラーが起きてしまいます。

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

js

$ docker-compose exec front yarn test yarn run v1.22.19 warning package.json: No license field $ jest ts-jest[config] (WARN) message TS151001: If you have issues related to imports, you should consider setting `esModuleInterop` to `true` in your TypeScript configuration file (usually `tsconfig.json`). See https://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/#easier-ecmascript-module-interoperability for more information. FAIL app/src/App.test.tsx Test suite failed to run app/src/App.test.tsx:3:17 - error TS6142: Module './App' was resolved to '/usr/src/app/app/src/App.tsx', but '--jsx' is not set. 3 import App from './App'; ~~~~~~~ app/src/App.test.tsx:6:10 - error TS17004: Cannot use JSX unless the '--jsx' flag is provided. 6 render(<App />); ~~~~~~~ Test Suites: 1 failed, 1 total Tests: 0 total Snapshots: 0 total Time: 6.323 s Ran all test suites. error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

tsconfig.json

json

{ "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, // "jsx": "preserve", // "jsx": "react", "jsx": "react-jsx", "baseUrl": "src", "useUnknownInCatchVariables": false }, "include": [ "src/**/*" ], "scripts": { "test": "jest" }, "jest": { "preset": "ts-jest" } }

package.json

json

{ "dependencies": { "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@material-ui/core": "^5.0.0-beta.5", "@material-ui/icons": "^5.0.0-beta.5", "@material-ui/lab": "^5.0.0-alpha.44", "@material-ui/styled-engine": "^5.0.0-alpha.11", "@mui/icons-material": "^5.8.4", "@mui/material": "^5.9.3", "@mui/styles": "^5.9.3", "@types/react": "^18.0.15", "@types/react-dom": "^18.0.6", "@types/styled-components": "^5.1.25", "axios": "^0.27.2", "axios-case-converter": "^0.9.0", "css": "^3.0.0", "debounce": "^1.2.1", "intro.js": "^6.0.0", "intro.js-react": "^0.6.0", "js-cookie": "^3.0.1", "react-dom": "^18.2.0", "react-router-dom": "^6.3.0", "react-select": "^5.4.0", "rooks": "^6.2.1", "sass": "^1.54.0", "styled-components": "^5.3.5", "typings-for-css-modules-loader": "^1.7.0", "wavesurfer-react": "^2.2.2", "wavesurfer.js": "^6.2.0" }, "devDependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.3.0", "@types/axios": "^0.14.0", "@types/jest": "^28.1.6", "@types/js-cookie": "^3.0.2", "@types/react-router-dom": "^5.3.3", "@types/wavesurfer.js": "^6.0.3", "jest": "^28.1.3", "ts-jest": "^28.0.7", "typescript": "^4.7.4" }, "scripts": { "test": "jest" }, "jest": { "preset": "ts-jest" } }

App.test.tsx

tsx

import React from 'react'; import { render, screen } from '@testing-library/react'; import App from './App'; test('renders learn react link', () => { render(<App />); const linkElement = screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument(); }); test("1+1=2", () => { const result = 1 + 1 expect(result).toBe(2) } );

試したこと

こちらのサイトを利用して以下のことを試しました。
https://maku.blog/p/9xxpe4t/
1 Jest のインストール

yarn add --dev jest @types/jest ts-jest

2 package.json の修正

json

{ // ... "scripts": { // ... "test": "jest" }, "jest": { "preset": "ts-jest" } }

3 yarn test を実行
この時にエラーが発生しました。

次に試したこと。

https://stackoverflow.com/questions/65197219/cannot-use-jsx-unless-the-jsx-flag-is-provided-when-i-did-yarn-start
https://stackoverflow.com/questions/64656055/react-refers-to-a-umd-global-but-the-current-file-is-a-module
https://bobbyhadz.com/blog/react-cannot-use-jsx-unless-the-jsx-flag-is-provided
https://qiita.com/hrism/items/3dff3f7822bb36e414a8
このエラーで検索したところ参考になりそうなサイトがいくつかあったので以下のことを試しました。
1.使用しているtypescriptのバージョンを4.1以上にする
改善せず。TypeScriptのバージョンは"typescript": "^4.7.4"なのでそもそも違う
2.tsconfig.json で compilerOptions.jsx = react-jsx とする
元々このように記述されていた。
3 compilerOptions.jsx = react-jsx  "jsx": "preserve"も試す
改善せず。エラーも変わらない
4 node_modeulesの再インストールを行う
rm -rf node_modulesでnode_modulesファイルを削除し、rm -f package-lock.json 、yarn cache cleanも実行して、yarnでもう一度再インストールを行った。改善せず。

5 もしかすると最初に上げたサイトのひとがpackage.json とtsconfig.jsonを書き間違えているのではないかと推測して、

json

"scripts": { "test": "jest" }, "jest": { "preset": "ts-jest" }

これをtsconfig.jsonにも記述
しかし、改善せず。
6 dockerを再度buildする
改善せず。
7 typescriptのバージョンを合わせる
DockerとVSCodeのTypeScriptのバージョンを合わせてテストを実行。しかし、改善せず。

自分の考察など

・エラーが起きると、それ以上先のテストが行われないという挙動に違和感?がある(Rspecではこのような挙動は取らなかった)
・エラー部分を削除すると、

tsx

test("1+1=2", () => { const result = 1 + 1 expect(result).toBe(2) } );

このテストが走り、正常にパスする

js

docker-compose exec front yarn test yarn run v1.22.19 warning package.json: No license field $ jest ts-jest[config] (WARN) message TS151001: If you have issues related to imports, you should consider setting `esModuleInterop` to `true` in your TypeScript configuration file (usually `tsconfig.json`). See https://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/#easier-ecmascript-module-interoperability for more information. PASS app/src/App.test.tsx (5.195 s) 1+1=2 (3 ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 5.325 s, estimated 6 s Ran all test suites. Done in 7.16s.

よって、何かしらインポートしていないものがあると予想。しかし、追加でインストールを促すエラーが出ていないのでここで詰まった
・何かしらアドバイスがあればよろしくお願いいたします。不備があれば追記します。

追記

・本体再起動を行いましたがだめでした。また、

json

"esModuleInterop": true,

のように設定しているにもかかわらず、

js

ts-jest[config] (WARN) message TS151001: If you have issues related to imports, you should consider setting `esModuleInterop` to `true` in your TypeScript configuration file (usually `tsconfig.json`). See https://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/#easier-ecmascript-module-interoperability for more information.

このようなエラーが発生します。私のディレクトリ構造がおかしいのでしょうか?ディレクトリ構造で怪しい点が2つあります。
https://qiita.com/taki_21/items/613f6a00bc432d1c221d
この方の情報通りにコマンドを実行したのですが、
1 node_modulesが2つできる
2 package.jsonも2つできる
なぜかこのような挙動を取りますが、これは仕様でしょうか?なぜ同じファイル・ディレクトリが生成されるのでしょうか?

また、マルチポストをしています。不快に思われたら申し訳ございません。

https://ja.stackoverflow.com/questions/90568/cannot-use-jsx-unless-the-jsx-flag-is-provided-%e3%81%8c%e3%81%a7%e3%81%a6jest%e3%81%8c%e4%bd%bf%e3%81%88%e3%81%aa%e3%81%84

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Jest

Jestは、JavaScriptのテストフレームワークです。設定が不要で、高速且つ安全にテストを開始できます。コードカバレッジを生成できる他、テストスコープ外のオブジェクトを容易にモック化できるなど、豊富な機能によりテストの導入を簡単にします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

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

React.js

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