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，运行缓存清理--强制，但我仍然得到这个错误，并再次运行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时也遇到了类似的问题。项目中的另一个依赖项可能是安装了与react-srcipts@4.0.0不兼容的不同版本的babel-jest。

从当前目录中删除终端并运行node_modules

• Delete package-lock.json

• Open

• npm ls babel-jest -这将显示您的项目中还需要哪些其他依赖项，并从

1. package.json.
2. Run npm i.
3. Once中删除需要babel-jest的依赖项。安装完成后，检查babel-jest版本-应该是react脚本需要的版本。
4. 现在可以恢复您删除的依赖项并再次运行npm i，或者使用-s或-D标志单独安装它们。/dev-dep)。

Answer 2

我也有同样的问题。解决方案是对创建React App 4所需的所有其他库进行升级(不仅仅是react-scripts)。

这篇文章是一个很好的指南：https://betterprogramming.pub/upgrade-create-react-app-based-projects-to-version-4-cra-4-d7962aee11a6