无法初始化监视插件“node_modules/jest-watch-typeahead/filename.js”：

Posted 2023-03-11

【中文标题】无法初始化监视插件“node_modules/jest-watch-typeahead/filename.js”：

【英文标题】：Failed to initialize watch plugin "node_modules/jest-watch-typeahead/filename.js":

【发布时间】：2022-01-09 05:10:07

【问题描述】：

我在我的项目中使用了对 typescript 的反应，并且我正在做快照测试，但是当我在 vscode 终端中运行 npm test 命令时，我收到了附加在附件中的错误。 你能告诉我应该怎么做才能使所有测试用例成功运行或我需要配置的任何其他东西

这是我的 package.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"
  

EngineeringArea.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();
  );
);

【问题讨论】：

就我而言，这是由节点 v14.16 引起的。升级到 v14.18 为我修复了它（使用 react-scripts 5.0.0 所以 YMMV）Issue

【参考方案1】：

最后一个答案是错误的。这是正确的答案。 https://github.com/facebook/create-react-app/issues/11043#issuecomment-942472592

【参考方案2】：

需要专门安装jest-watch-typeahead的v0.6.5

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

【参考方案3】：

我在尝试使用带有 npx 的 CRA 创建新的 React 应用程序时遇到了这个问题。

我遵循了Matt 在他的回答中建议的内容，但 jest 开始抛出一个错误，说最好删除任何 babel-jest 依赖项，这很奇怪，但我猜 jest-watch-typehead 可能使用 babel（这很疯狂猜的，我没查过）。

无论如何，这是我根据 babel-jest 抛出的错误在控制台上得到的建议所做的。

已删除 package-lock.json 文件。 删除了node_modules/。 做了一个新鲜的npm i。 我再次运行我的测试并得到一个错误，因为没有在App.test.js 中导入 React，所以我只是导入并且它工作了。