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

前提

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

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

js
1$ docker-compose exec front yarn test
2yarn run v1.22.19
3warning package.json: No license field
4$ jest
5ts-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.
6 FAIL  app/src/App.test.tsx
7  ● Test suite failed to run
8
9    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.
10
11    3 import App from './App';
12                      ~~~~~~~
13    app/src/App.test.tsx:6:10 - error TS17004: Cannot use JSX unless the '--jsx' flag is provided.
14
15    6   render(<App />);
16               ~~~~~~~
17
18Test Suites: 1 failed, 1 total
19Tests:       0 total
20Snapshots:   0 total
21Time:        6.323 s
22Ran all test suites.
23error Command failed with exit code 1.
24info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

tsconfig.json

json
1{
2  "compilerOptions": {
3    "target": "es5",
4    "lib": [
5      "dom",
6      "dom.iterable",
7      "esnext"
8    ],
9    "allowJs": true,
10    "skipLibCheck": true,
11    "esModuleInterop": true,
12    "allowSyntheticDefaultImports": true,
13    "strict": true,
14    "forceConsistentCasingInFileNames": true,
15    "noFallthroughCasesInSwitch": true,
16    "module": "esnext",
17    "moduleResolution": "node",
18    "resolveJsonModule": true,
19    "isolatedModules": true,
20    "noEmit": true,
21    // "jsx": "preserve",
22    // "jsx": "react",
23    "jsx": "react-jsx",
24    "baseUrl": "src", 
25    "useUnknownInCatchVariables": false
26  },
27  "include": [
28    "src/**/*"
29  ],
30  "scripts": {
31    "test": "jest"
32  },
33  "jest": {
34    "preset": "ts-jest"
35  }
36}

package.json

json
1{
2  "dependencies": {
3    "@emotion/react": "^11.10.0",
4    "@emotion/styled": "^11.10.0",
5    "@material-ui/core": "^5.0.0-beta.5",
6    "@material-ui/icons": "^5.0.0-beta.5",
7    "@material-ui/lab": "^5.0.0-alpha.44",
8    "@material-ui/styled-engine": "^5.0.0-alpha.11",
9    "@mui/icons-material": "^5.8.4",
10    "@mui/material": "^5.9.3",
11    "@mui/styles": "^5.9.3",
12    "@types/react": "^18.0.15",
13    "@types/react-dom": "^18.0.6",
14    "@types/styled-components": "^5.1.25",
15    "axios": "^0.27.2",
16    "axios-case-converter": "^0.9.0",
17    "css": "^3.0.0",
18    "debounce": "^1.2.1",
19    "intro.js": "^6.0.0",
20    "intro.js-react": "^0.6.0",
21    "js-cookie": "^3.0.1",
22    "react-dom": "^18.2.0",
23    "react-router-dom": "^6.3.0",
24    "react-select": "^5.4.0",
25    "rooks": "^6.2.1",
26    "sass": "^1.54.0",
27    "styled-components": "^5.3.5",
28    "typings-for-css-modules-loader": "^1.7.0",
29    "wavesurfer-react": "^2.2.2",
30    "wavesurfer.js": "^6.2.0"
31  },
32  "devDependencies": {
33    "@testing-library/jest-dom": "^5.16.5",
34    "@testing-library/react": "^13.3.0",
35    "@types/axios": "^0.14.0",
36    "@types/jest": "^28.1.6",
37    "@types/js-cookie": "^3.0.2",
38    "@types/react-router-dom": "^5.3.3",
39    "@types/wavesurfer.js": "^6.0.3",
40    "jest": "^28.1.3",
41    "ts-jest": "^28.0.7",
42    "typescript": "^4.7.4"
43  },
44  "scripts": {
45    "test": "jest"
46  },
47  "jest": {
48    "preset": "ts-jest"
49  }
50}
51

App.test.tsx

tsx
1import React from 'react';
2import { render, screen } from '@testing-library/react';
3import App from './App';
4
5test('renders learn react link', () => {
6  render(<App />);
7  const linkElement = screen.getByText(/learn react/i);
8  expect(linkElement).toBeInTheDocument();
9});
10
11test("1+1=2", () => {
12  const result = 1 + 1
13  expect(result).toBe(2)
14} );

試したこと

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

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

２　package.json の修正

json
1{
2  // ...
3  "scripts": {
4    // ...
5    "test": "jest"
6  },
7  "jest": {
8    "preset": "ts-jest"
9  }
10}
11

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 とする
元々このように記述されていた。
３　compilerOptions.jsx = react-jsx 　"jsx": "preserve"も試す
改善せず。エラーも変わらない
４　node_modeulesの再インストールを行う
rm -rf node_modulesでnode_modulesファイルを削除し、rm -f package-lock.json 、yarn cache cleanも実行して、yarnでもう一度再インストールを行った。改善せず。

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

json
1"scripts": {
2    "test": "jest"
3  },
4  "jest": {
5    "preset": "ts-jest"
6  }

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

自分の考察など

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

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

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

js
1 docker-compose exec front yarn test
2yarn run v1.22.19
3warning package.json: No license field
4$ jest
5ts-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.
6 PASS  app/src/App.test.tsx (5.195 s)
7  ✓ 1+1=2 (3 ms)
8
9Test Suites: 1 passed, 1 total
10Tests:       1 passed, 1 total
11Snapshots:   0 total
12Time:        5.325 s, estimated 6 s
13Ran all test suites.
14Done in 7.16s.

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

追記

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

json
1"esModuleInterop": true,

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

js
1ts-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
この方の情報通りにコマンドを実行したのですが、
１　node_modulesが２つできる
２　package.jsonも２つできる
なぜかこのような挙動を取りますが、これは仕様でしょうか？なぜ同じファイル・ディレクトリが生成されるのでしょうか？

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

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