Establishment of FE automated testing environment

tsuchiyama-araya commented 1 month ago

FE自動テストの環境構築

【完了条件】

今までのフロントエンドテストが問題なく動くこと
新しいテストにWarningやエラーの線が出ないこと

tsuchiyama-araya commented 3 weeks ago

テストを動かすとnode_modulesのエラーが表示されます。

Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

tsuchiyama-araya commented 3 weeks ago

node_modulesの対策をしてみましたがまた新しいエラーが表示されました。

Test suite failed to run

    Cannot find module '/Users/tsuchiyama/Developer/barebone-studio/frontend/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault.js' from 'src/components/Workspace/FlowChart/TreeView.tsx'

    Require stack:
      src/components/Workspace/FlowChart/TreeView.tsx
      src/components/Workspace/FlowChart/__tests__/TreeView.test.tsx

      1 | import { memo, useCallback, useEffect } from "react"
      2 | import { useDrag } from "react-dnd"
    > 3 | import { useSelector, useDispatch } from "react-redux"
        |                              ^
      4 |
      5 | import AddIcon from "@mui/icons-material/Add"
      6 | import ChevronRightIcon from "@mui/icons-material/ChevronRight"

【行なった対策】 https://zenn.dev/t_yng/scraps/d701cdae1071fd https://qiita.com/miyuc/items/a5cae6252231e224f57f https://qiita.com/Sicut_study/items/ba23e8b8a22a3b5b0b3e https://zenn.dev/s_takashi/articles/72d864681aab1d https://stackoverflow.com/questions/71058618/to-have-some-of-your-node-modules-files-transformed-you-can-specify-a-custom

itutu-tienday commented 3 weeks ago

調査状況メモ

当件（jestをesm形式のnode_moduleに対応させる)への対策は、様々情報があるが、この件は、「CRAとjestを組み合わせたケース」に要因があるとも想定される。
以下直接関係すると見られる情報
- https://github.com/react-dnd/react-dnd/issues/3443
- axiosでも類似の課題あり
- https://github.com/axios/axios/issues/5101
以下で暫定的な対策を適用
- 418
- 以下で提案されている修正を適用（package.jsonやjest.config.js での設定では、CRAの内部設定と競合するためか？機能しないため、command line へ直接指定）
  - https://github.com/react-dnd/react-dnd/issues/3443#issuecomment-1109928701
- ＊ただし、元のエラーは消えたようだが、他のエラーが生じている。このエラーが引き続き環境構築起因のものか、単にテストコードの不備に起因するものか、確認を要継続。

itutu-tienday commented 3 weeks ago

調査状況メモ # 2

以下の指定を試したが、機能しているようだが、動作が不安定であるようなため、他の対処方法を追加調査 react-app-rewired test --transformIgnorePatterns "node_modules/(?!react-dnd)/"
- 課題) transformIgnorePatterns 自体は機能しているようだが、正規表現パターンが機能していない？
対策
- https://stackoverflow.com/questions/72187128/react-jest-tests-fails-with-react-dnd-syntaxerror-unexpected-token-export
  
  Add the common javascript libraries to your project I'm using yarn yarn add react-dnd-cjs yarn add react-dnd-html5-backend-cjs Then in your package.json add... "jest": { "moduleNameMapper": { "react-dnd": "react-dnd-cjs", "react-dnd-html5-backend": "react-dnd-html5-backend-cjs", "dnd-core": "dnd-core-cjs" }
- react-dnd の cjs版が存在しており、そちらをインスールし、jest実行時は moduleNameMapper で cjs版を実行するように設定
- PR: #418

上記の対策は機能している模様。ただし、対策後も transformIgnorePatterns 指定版と同様のエラーが出ているため、このエラーが引き続き環境構築起因のものか、単にテストコードの不備に起因するものか、確認を要継続。

tsuchiyama-araya commented 2 weeks ago

進捗メモ

・Jestの環境に関する問題で時間が大幅にかかってしまいました。そのため、実際に１週間ほどかかりました。・現在、Jestの問題は解決しましたが、テストがまだすべて通過していないため、環境が完全に整っているかどうかはまだ確信が持てません。

8月30日・テストの書き方に問題があったことが確認できたため、環境構築は一旦解決しました。

arayabrain / barebone-studio