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

  • 相关阅读:
    记一次 contentInsetAdjustmentBehavior 引发的bug
    Android埋点技术概览
    Android开发快速入门iOS开发概览
    工作项目遇到的一些问题
    ruby操作项目.xcodeproj
    关于performSelector afterDelay:0 的使用
    谷歌Python代码风格指南 中文翻译
    最大子矩阵问题--悬线法dp
    tarjan
    SDU CSPT3模拟
  • 原文地址:https://www.cnblogs.com/xy-ouyang/p/12175202.html
Copyright © 2020-2023  润新知