watch 플러그인 "node_modules/jest-watch-typeahead/filename.js"를 초기화하지 못했습니다.

watch 플러그인 "node_modules/jest-watch-typeahead/filename.js"를 초기화하지 못했습니다.

프로젝트에서 typscript를 사용한 react를 사용하고 스냅샷 테스트도 하고 있습니다만, vscode 터미널에서 npm test 명령을 실행하면 첨부 파일에 첨부되어 있는 에러가 발생합니다.테스트 케이스가 정상적으로 실행되도록 하려면 어떻게 해야 하는지 또는 기타 필요한 사항을 알려 주시겠습니까?

여기 제 소포가 있습니다.json

{
  "name": "vcc-collaboration-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fluentui/react": "^8.42.1",
    "@fluentui/react-file-type-icons": "^8.5.6",
    "@testing-library/jest-dom": "^5.15.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@types/react-test-renderer": "^17.0.1",
    "ag-grid-community": "^26.2.0",
    "ag-grid-react": "^26.2.0",
    "axios": "^0.24.0",
    "babel-jest": "^26.6.0",
    "jest": "^26.6.0",
    "jest-watch-typeahead": "^1.0.0",
    "moment": "^2.29.1",
    "node-sass": "^6.0.1",
    "react": "^17.0.2",
    "react-bootstrap": "^2.0.2",
    "react-dom": "^17.0.2",
    "react-dropzone": "^11.4.2",
    "react-grid": "^4.0.4",
    "react-icons": "^4.3.1",
    "react-router-dom": "^5.0.0",
    "react-scripts": "4.0.3",
    "react-test-renderer": "^17.0.2",
    "vcc-ui": "^2.11.0",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/jest": "^27.0.3",
    "@types/node": "^16.11.7",
    "@types/react": "^17.0.35",
    "@types/react-dom": "^17.0.11",
    "@types/react-dropzone": "^5.1.0",
    "@types/react-router": "^5.1.17",
    "@types/react-router-dom": "^5.3.2",
    "typescript": "^4.5.2"
  }
}

Engineering Area.test.tsx

import React from "react";
import * as ShallowRenderer from "react-test-renderer/shallow";
import EngineeringArea from "./EngineeringArea";

describe("EngineeringArea Screen", () => {
  it("EngineeringArea Screen renders correctly", () => {
    const renderer = ShallowRenderer.createRenderer();
    const component = renderer.render(<EngineeringArea />);
    expect(component).toMatchSnapshot();
  });
});

특히 v0.6.5를 설치해야 합니다.jest-watch-typeahead

npm i -D --exact jest-watch-typeahead@0.6.5

이 에러가 발생했을 경우.답변은 nvm을 사용하여 노드의 현재 릴리스(시스템 기본값)에서 LTS(16.14.0)로 전환하는 것이었습니다.nvm use 16

또, 테스트중에 에러 메세지가 표시된다.노드 버전 변경은 성공했습니다.다음은 기사 링크입니다.https://github.com/facebook/create-react-app/issues/11792

마지막 답은 틀렸다.정답은 여기 있습니다.https://github.com/facebook/create-react-app/issues/11043#issuecomment-942472592

Vite-React 및 Create React App에서는 다음과 같이 동작합니다.

특히 jest-watch-automahead v0.6.5를 설치해야 합니다.

npm i -D --exact jest-watch-typeahead@0.6.5

고마워요 매트

npx를 사용하여 CRA를 사용하여 새로운 리액트 애플리케이션을 작성하려고 하다가 이 문제에 직면했습니다.

맷이 제시한 대로 따라 했지만 바벨제스트 의존관계는 없애는 게 낫다는 우스갯소리가 터져나오기 시작했다.이상하지만 jest-watch 타입의 헤드는 바벨을 사용하는 것 같다(확인은 안 했다).

어쨌든, 이것은 babel-jest가 던진 에러로부터 콘솔로부터 얻은 제안을 바탕으로 한 것입니다.

• 제거된package-lock.json파일.
• 제거된node_modules/.
• 새로고침npm i.
• 테스트를 다시 실행했는데 React를 Import하지 않았다는 오류가 표시되었습니다.App.test.js그래서 그냥 수입만 하면 되더라고요.

언급URL : https://stackoverflow.com/questions/70204039/failed-to-initialize-watch-plugin-node-modules-jest-watch-typeahead-filename-js