Establishment of FE automated testing environment

[tsuchiyama-araya]

FE自動テストの環境構築

【完了条件】

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

[tsuchiyama-araya]

テストを動かすと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]

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]

調査状況メモ

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

[itutu-tienday]

調査状況メモ # 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: patch for jest run #418

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

[tsuchiyama-araya]

進捗メモ

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

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