typescript - react-scripts 从 3.4 更新到 4.0 导致 Jest 版本错误

Question

我正在尝试将 react-scripts 版本从 3.4.3 更新到 4.0 以获得对 4.0 的 typescript 支持但是更新抛出以下错误:

Create React App 提供的 react-scripts 包需要依赖:

“babel-jest”:“^26.6.0”

不要尝试手动安装:您的包管理器会自动安装。然而，在树的更高层检测到了不同版本的 babel-jest:

我尝试通过以下方式更新:

  npm install --save --save-exact react-scripts@4.0.0

我尝试删除 node_modules，运行 cache clean --force 但我仍然收到此错误并再次运行 npm install

这是我原来的package.json

  {
   "name": "react-redux",
   "version": "0.1.0",
   "private": true,
   "scripts": {
       "start:local": "env-cmd -f .env.local react-scripts start",
       "start:dev": "env-cmd -f .env.dev react-scripts start",
       "start:qa": "env-cmd -f .env.qa react-scripts start",
       "start:uat": "env-cmd -f .env.uat react-scripts start",
       "start:prod": "env-cmd -f .env.prod react-scripts start",
       "build:local": "env-cmd -f .env.local react-scripts build",
       "build:dev": "env-cmd -f .env.dev react-scripts build",
       "build:qa": "env-cmd -f .env.qa react-scripts build",
       "build:uat": "env-cmd -f .env.uat react-scripts build",
       "build:prod": "env-cmd -f .env.prod react-scripts build",
       "prestart:api": "node tools/create-mock-db.js",
       "start:api": "node tools/api-server.js",
       "test": "jest",
       "start": "run-p start:api start:dev",
       "build": "run-p build:dev"
   },
   "jest": {
       "setupFiles": [
           "./tools/testSetup.js"
       ],
       "moduleNameMapper": {
           "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|mp3|wav|m4a|aac|oga)$": "<rootDir>/tools/fileMock.js",
           "\\.(css|less)$": "<rootDir>/tools/style-mock.js"
       }
   },
   "dependencies": {
       "@draft-js-plugins/editor": "^4.0.0-beta2",
       "@draft-js-plugins/mention": "^4.0.0-beta2",
       "@fluentui/react": "^7.109.1",
       "@progress/kendo-data-query": "1.5.2",
       "@progress/kendo-date-math": "1.5.1",
       "@progress/kendo-drawing": "1.6.0",
       "@progress/kendo-react-animation": "3.9.0",
       "@progress/kendo-react-buttons": "3.9.0",
       "@progress/kendo-react-data-tools": "^3.9.0",
       "@progress/kendo-react-dateinputs": "3.9.0",
       "@progress/kendo-react-dialogs": "3.9.0",
       "@progress/kendo-react-dropdowns": "3.9.0",
       "@progress/kendo-react-editor": "3.11.0",
       "@progress/kendo-react-excel-export": "3.9.0",
       "@progress/kendo-react-grid": "3.9.0",
       "@progress/kendo-react-inputs": "3.9.0",
       "@progress/kendo-react-intl": "3.9.0",
       "@progress/kendo-react-layout": "3.9.0",
       "@progress/kendo-react-pdf": "3.9.0",
       "@progress/kendo-react-popup": "3.9.0",
       "@progress/kendo-react-upload": "^3.14.0",
       "@progress/kendo-theme-bootstrap": "^4.9.1",
       "@reduxjs/toolkit": "^1.2.1",
       "@testing-library/jest-dom": "^4.2.4",
       "@testing-library/react": "^9.3.2",
       "@testing-library/user-event": "^7.1.2",
       "@types/bootstrap": "^4.3.1",
       "@types/enzyme": "^3.10.4",
       "@types/jest": "^24.0.24",
       "@types/node": "^12.0.0",
       "@types/react": "^16.9.0",
       "@types/react-dom": "^16.9.0",
       "@types/react-redux": "^7.1.5",
       "@types/react-router-dom": "^5.1.3",
       "@types/react-toastify": "^4.1.0",
       "@types/redux": "^3.6.0",
       "@types/redux-immutable-state-invariant": "^2.1.1",
       "@types/redux-thunk": "^2.1.0",
       "@types/reselect": "^2.2.0",
       "@uifabric/example-data": "^7.0.14",
       "@uifabric/icons": "^7.3.33",
       "bootstrap": "^4.4.1",
       "draft-js": "^0.11.7",
       "draft-js-export-html": "^1.4.1",
       "immer": "2.1.3",
       "lodash": "^4.17.20",
       "node-sass": "^4.14.1",
       "powerbi-client-react": "^1.1.0",
       "prop-types": "15.7.2",
       "react": "^16.12.0",
       "react-app-polyfill": "^1.0.6",
       "react-bootstrap": "^1.0.0-beta.16",
       "react-dom": "^16.12.0",
       "react-mentions": "^4.0.1",
       "react-redux": "^7.1.3",
       "react-router-dom": "^5.1.2",
       "react-scripts": "^3.4.3",
       "react-toastify": "^5.4.1",
       "react-transition-group": "4.3.0",
       "redux": "^4.0.4",
       "redux-immutable-state-invariant": "^2.1.0",
       "redux-thunk": "^2.3.0",
       "reselect": "^4.0.0",
       "typescript": "^4.1.2"
   },
   "devDependencies": {
       "@types/draft-js": "^0.10.44",
       "@types/lodash": "^4.14.161",
       "@types/react-mentions": "^3.3.0",
       "env-cmd": "^10.1.0",
       "enzyme": "^3.9.0",
       "enzyme-adapter-react-16": "1.11.2",
       "fetch-mock": "^8.1.0",
       "jest": "^24.9.0",
       "json-server": "^0.16.1",
       "node-fetch": "^2.6.1",
       "npm-run-all": "4.1.5",
       "react-test-renderer": "16.8.4",
       "react-testing-library": "^6.1.2",
       "redux-immutable-state-invariant": "2.1.0",
       "redux-mock-store": "^1.5.3",
       "rimraf": "2.6.3",
       "selfsigned": "^1.10.7",
       "style-loader": "0.23.1"
   },
   "browserslist": {
       "production": [
           ">0.2%",
           "not dead",
           "not op_mini all"
       ],
       "development": [
           "last 1 chrome version",
           "last 1 firefox version",
           "last 1 safari version"
       ]
   }
}

运行更新后这是我的版本-

{
    "name": "react-redux",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "start:local": "env-cmd -f .env.local react-scripts start",
        "start:dev": "env-cmd -f .env.dev react-scripts start",
        "start:qa": "env-cmd -f .env.qa react-scripts start",
        "start:uat": "env-cmd -f .env.uat react-scripts start",
        "start:prod": "env-cmd -f .env.prod react-scripts start",
        "build:local": "env-cmd -f .env.local react-scripts build",
        "build:dev": "env-cmd -f .env.dev react-scripts build",
        "build:qa": "env-cmd -f .env.qa react-scripts build",
        "build:uat": "env-cmd -f .env.uat react-scripts build",
        "build:prod": "env-cmd -f .env.prod react-scripts build",
        "prestart:api": "node tools/create-mock-db.js",
        "start:api": "node tools/api-server.js",
        "test": "jest",
        "start": "run-p start:api start:dev",
        "build": "run-p build:dev"
    },
    "jest": {
        "setupFiles": [
            "./tools/testSetup.js"
        ],
        "moduleNameMapper": {
            "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|mp3|wav|m4a|aac|oga)$": "<rootDir>/tools/fileMock.js",
            "\\.(css|less)$": "<rootDir>/tools/style-mock.js"
        }
    },
    "dependencies": {
        "@draft-js-plugins/editor": "^4.0.0-beta2",
        "@draft-js-plugins/mention": "^4.0.0-beta2",
        "@fluentui/react": "^7.109.1",
        "@progress/kendo-data-query": "1.5.2",
        "@progress/kendo-date-math": "1.5.1",
        "@progress/kendo-drawing": "1.6.0",
        "@progress/kendo-react-animation": "3.9.0",
        "@progress/kendo-react-buttons": "3.9.0",
        "@progress/kendo-react-data-tools": "^3.9.0",
        "@progress/kendo-react-dateinputs": "3.9.0",
        "@progress/kendo-react-dialogs": "3.9.0",
        "@progress/kendo-react-dropdowns": "3.9.0",
        "@progress/kendo-react-editor": "3.11.0",
        "@progress/kendo-react-excel-export": "3.9.0",
        "@progress/kendo-react-grid": "3.9.0",
        "@progress/kendo-react-inputs": "3.9.0",
        "@progress/kendo-react-intl": "3.9.0",
        "@progress/kendo-react-layout": "3.9.0",
        "@progress/kendo-react-pdf": "3.9.0",
        "@progress/kendo-react-popup": "3.9.0",
        "@progress/kendo-react-upload": "^3.14.0",
        "@progress/kendo-theme-bootstrap": "^4.9.1",
        "@reduxjs/toolkit": "^1.2.1",
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.3.2",
        "@testing-library/user-event": "^7.1.2",
        "@types/bootstrap": "^4.3.1",
        "@types/enzyme": "^3.10.4",
        "@types/jest": "^24.0.24",
        "@types/node": "^12.0.0",
        "@types/react": "^16.9.0",
        "@types/react-dom": "^16.9.0",
        "@types/react-redux": "^7.1.5",
        "@types/react-router-dom": "^5.1.3",
        "@types/react-toastify": "^4.1.0",
        "@types/redux": "^3.6.0",
        "@types/redux-immutable-state-invariant": "^2.1.1",
        "@types/redux-thunk": "^2.1.0",
        "@types/reselect": "^2.2.0",
        "@uifabric/example-data": "^7.0.14",
        "@uifabric/icons": "^7.3.33",
        "bootstrap": "^4.4.1",
        "draft-js": "^0.11.7",
        "draft-js-export-html": "^1.4.1",
        "immer": "2.1.3",
        "lodash": "^4.17.20",
        "node-sass": "^4.14.1",
        "powerbi-client-react": "^1.1.0",
        "prop-types": "15.7.2",
        "react": "^16.12.0",
        "react-app-polyfill": "^1.0.6",
        "react-bootstrap": "^1.0.0-beta.16",
        "react-dom": "^16.12.0",
        "react-mentions": "^4.0.1",
        "react-redux": "^7.1.3",
        "react-router-dom": "^5.1.2",
        "react-scripts": "4.0.0",
        "react-toastify": "^5.4.1",
        "react-transition-group": "4.3.0",
        "redux": "^4.0.4",
        "redux-immutable-state-invariant": "^2.1.0",
        "redux-thunk": "^2.3.0",
        "reselect": "^4.0.0",
        "typescript": "^4.0.3"
    },
    "devDependencies": {
        "@types/draft-js": "^0.10.44",
        "@types/lodash": "^4.14.161",
        "@types/react-mentions": "^3.3.0",
        "env-cmd": "^10.1.0",
        "enzyme": "^3.9.0",
        "enzyme-adapter-react-16": "1.11.2",
        "fetch-mock": "^8.1.0",
        "jest": "^24.9.0",
        "json-server": "^0.16.1",
        "node-fetch": "^2.6.1",
        "npm-run-all": "4.1.5",
        "react-test-renderer": "16.8.4",
        "react-testing-library": "^6.1.2",
        "redux-immutable-state-invariant": "2.1.0",
        "redux-mock-store": "^1.5.3",
        "rimraf": "2.6.3",
        "selfsigned": "^1.10.7",
        "style-loader": "0.23.1"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

我们应该手动更新 jest 吗？

Answer 1

我对 babel-loader 也有类似的问题。有可能你的项目中的另一个依赖项正在安装不同版本的 babel-jest，它与 react-srcipts@4.0.0 不兼容。

1. 删除节点模块
2. 删除 package-lock.json
3. 在当前目录中打开终端并运行 npm ls babel-jest - 这将向您显示项目中的其他依赖项需要 babel-jest。
4. 暂时从 package.json 中移除需要 babel-jest 的依赖。
5. 运行 npm i。
6. 安装完成后，检查 babel-jest 版本 - 应该是 react-scripts 需要的版本。
7. 现在恢复您删除的依赖项并再次运行 npm i 或使用标志 -s 或 -D 分别安装它们中的每一个(部门/开发部门)。