1

前提

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

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

$ 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

{
  "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

{
  "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

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 の修正

{
  // ...
  "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を書き間違えているのではないかと推測して、

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

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

自分の考察など

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

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

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

 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.

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

追記

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

"esModuleInterop": true,

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

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://teratail.com/questions/ociz2hyjnvqat2

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。