旧create-react-app项目集成jest+enzyme

在create-react-app创建的老项目上面集成jest-enzyme发现用上一篇博客的配置报错:

  看报错知道是上篇博客的.babelrc.js的配置没有生效。

  使用npm run eject指令将create-react-app项目的配置暴露出来,命令执行结果:

Copying files into D:oy	empxxx
  Adding configenv.js to the project
  Adding configpaths.js to the project
  Adding configpolyfills.js to the project
  Adding configwebpack.config.dev.js to the project
  Adding configwebpack.config.prod.js to the project
  Adding configwebpackDevServer.config.js to the project
  Adding configjestcssTransform.js to the project
  Adding configjestfileTransform.js to the project
  Adding scriptsuild.js to the project
  Adding scriptsstart.js to the project
  Adding scripts	est.js to the project

Updating the dependencies
  Removing react-scripts from devDependencies
  Adding autoprefixer to dependencies
  Adding babel-core to dependencies
  Adding babel-eslint to dependencies
  Adding babel-jest to dependencies
  Adding babel-loader to dependencies
  Adding babel-preset-react-app to dependencies
  Adding babel-runtime to dependencies
  Adding case-sensitive-paths-webpack-plugin to dependencies
  Adding chalk to dependencies
  Adding css-loader to dependencies
  Adding dotenv to dependencies
  Adding dotenv-expand to dependencies
  Adding eslint to dependencies
  Adding eslint-config-react-app to dependencies
  Adding eslint-loader to dependencies
  Adding eslint-plugin-flowtype to dependencies
  Adding eslint-plugin-import to dependencies
  Adding eslint-plugin-jsx-a11y to dependencies
  Adding eslint-plugin-react to dependencies
  Adding extract-text-webpack-plugin to dependencies
  Adding file-loader to dependencies
  Adding fs-extra to dependencies
  Adding html-webpack-plugin to dependencies
  Adding jest to dependencies
  Adding object-assign to dependencies
  Adding postcss-flexbugs-fixes to dependencies
  Adding postcss-loader to dependencies
  Adding promise to dependencies
  Adding raf to dependencies
  Adding react-dev-utils to dependencies
  Adding resolve to dependencies
  Adding style-loader to dependencies
  Adding sw-precache-webpack-plugin to dependencies
  Adding url-loader to dependencies
  Adding webpack to dependencies
  Adding webpack-dev-server to dependencies
  Adding webpack-manifest-plugin to dependencies
  Adding whatwg-fetch to dependencies

Updating the scripts
  Replacing "react-scripts start" with "node scripts/start.js"
  Replacing "react-scripts test" with "node scripts/test.js"

Configuring package.json
  Adding Jest configuration
  Adding Babel preset
  Adding ESLint configuration
  
  Running npm install...
added 20 packages from 75 contributors, removed 108 packages, updated 80 packages, moved 3 packages and audited 37819 packages in 70.858s
found 198 vulnerabilities (39 low, 14 moderate, 145 high)
  run `npm audit fix` to fix them, or `npm audit` for details
Ejected successfully!

Please consider sharing why you ejected in this survey:
  http://goo.gl/forms/Bi6CZjk1EqsdelXk1

  执行完npm run eject后package.json

{
  "name": "xxx",
  "version": "2.0.0",
  "private": true,
  "dependencies": {
    "ace-builds": "^1.4.7",
    "antd": "^3.21.2",
    "as-table": "^1.0.52",
    "autoprefixer": "7.1.6",
    "babel-core": "6.26.0",
    "babel-eslint": "7.2.3",
    "babel-jest": "20.0.3",
    "babel-loader": "7.1.2",
    "babel-preset-react-app": "^3.1.2",
    "babel-runtime": "6.26.0",
    "bizcharts": "^3.5.5",
    "case-sensitive-paths-webpack-plugin": "2.1.1",
    "chalk": "1.1.3",
    "crypto-js": "^3.1.9-1",
    "css-loader": "0.28.7",
    "dotenv": "4.0.0",
    "dotenv-expand": "4.2.0",
    "echarts": "^4.2.1",
    "echarts-for-react": "^2.0.14",
    "eslint": "4.10.0",
    "eslint-config-react-app": "^2.1.0",
    "eslint-loader": "1.9.0",
    "eslint-plugin-flowtype": "2.39.1",
    "eslint-plugin-import": "2.8.0",
    "eslint-plugin-jsx-a11y": "5.1.1",
    "eslint-plugin-react": "7.4.0",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.5",
    "fs-extra": "3.0.1",
    "g2": "^2.3.13",
    "g2-react": "^1.3.2",
    "google-libphonenumber": "^3.2.6",
    "html-webpack-plugin": "2.29.0",
    "jest": "20.0.4",
    "jquery": "^3.4.1",
    "lodash": "^4.17.15",
    "moment": "^2.24.0",
    "moment-strftime": "^0.3.2",
    "moment-timezone": "^0.5.27",
    "object-assign": "4.1.1",
    "plotly.js": "^1.49.4",
    "postcss-flexbugs-fixes": "3.2.0",
    "postcss-loader": "2.0.8",
    "promise": "8.0.1",
    "prop-types": "^15.7.2",
    "qrcode.react": "^1.0.0",
    "query-string": "^6.8.3",
    "raf": "3.4.0",
    "ramda": "^0.25.0",
    "react": "^16.9.0",
    "react-ace": "^8.0.0",
    "react-addons-css-transition-group": "^15.6.2",
    "react-bootstrap": "^0.32.4",
    "react-bootstrap-table": "^4.3.1",
    "react-bootstrap-table-next": "^0.1.15",
    "react-copy-to-clipboard": "^5.0.2",
    "react-dev-utils": "^5.0.2",
    "react-dom": "^16.9.0",
    "react-highcharts": "^16.0.2",
    "react-json-view": "^1.19.1",
    "react-phone-input-2": "^2.11.0",
    "react-plotly": "^1.0.0",
    "react-plotly.js": "^2.3.0",
    "react-router-dom": "^4.3.1",
    "react-select": "^1.3.0",
    "resolve": "1.6.0",
    "round-precision": "^1.0.0",
    "sha256": "^0.2.0",
    "simple-statistics": "^6.1.1",
    "speakeasy": "^2.0.0",
    "style-loader": "0.19.0",
    "sw-precache-webpack-plugin": "0.11.4",
    "sweetalert2": "^7.33.1",
    "url-loader": "0.6.2",
    "webpack": "3.8.1",
    "webpack-dev-server": "2.11.3",
    "webpack-manifest-plugin": "1.3.2",
    "whatwg-fetch": "2.0.3"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "react-scripts --max_old_space_size=4096 build",
    "test": "node scripts/test.js --env=jsdom"
  },
  "proxy": "http://localhost:3001",
  "devDependencies": {
    "eslint": "^5.16.0",
    "jest": "^23.6.0",
    "npm": "^6.11.2"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,mjs}"
    ],
    "setupFiles": [
      "<rootDir>/config/polyfills.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "transform": {
      "^.+\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
      "^.+\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\]node_modules[/\\].+\.(js|jsx|mjs)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "json",
      "web.jsx",
      "jsx",
      "node",
      "mjs"
    ]
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  },
  "eslintConfig": {
    "extends": "react-app"
  }
}

  根据上面暴露出来的配置,提出下面的解决思路:

  在package.json添加

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts --max_old_space_size=4096 build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "jest": "jest --colors --coverage"
},
"babel": {
    "presets": [
      "react-app"
    ]
},
"jest": {
    "testMatch": [
      "<rootDir>/test/**/*.{js,jsx,mjs}"
    ]
}

  testMatch:配置jest过滤测试文件规则

原文地址:https://www.cnblogs.com/xy-ouyang/p/12175202.html