

### 前提

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

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

[code]

    $ 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.
    
[/code]

### tsconfig.json

[code]

    {
      "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"
      }
    }
    
[/code]

### package.json

[code]

    {
      "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"
      }
    }
    
    
[/code]

### App.test.tsx

[code]

    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)
    } );
    
[/code]

### 試したこと

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

[code]

    yarn add --dev jest @types/jest ts-jest
    
[/code]

２ package.json の修正

[code]

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

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

[code]

    "scripts": {
        "test": "jest"
      },
      "jest": {
        "preset": "ts-jest"
      }
    
[/code]

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

### 自分の考察など

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

[code]

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

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

[code]

     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.
    
[/code]

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

## 追記

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

[code]

    "esModuleInterop": true,
    
[/code]

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

[code]

    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.
    
[/code]

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

また、マルチポストをしています。不快に思われたら申し訳ございません。  
<https://teratail.com/questions/ociz2hyjnvqat2>


CC BY-SA 4.0
2022-08-15T10:52:25.207
90568
2022-08-15T10:52:25.207
51193
question
javascript reactjs typescript jestjs
Cannot use JSX unless the '--jsx' flag is provided.がでてJestが使えない