在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过滤测试文件规则