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

  • 相关阅读:
    python 使用pyinstaller生成exe,以及编译报错:编译时报错如下:No module named timedeltas not build. If you want import pandas from the source directory, you may need to run 'python setup.py build_ext --inplace --force' to
    Remote desktop manager 如何导入.db配置文件
    C# string怎么转换成泛型T?
    C# 如何在ComboBox输入文字改变时,触发事件?
    C# 检查panel所有的checkbox 是否被选中
    C# bool? 的意思
    WPF: Accessing Databases with Windows Presentation Foundation / WPF链接数据库
    WPF 03
    WPF MVVC 基础
    使用 Topshelf 创建 Windows 服务
  • 原文地址:https://www.cnblogs.com/xy-ouyang/p/12175202.html
Copyright © 2020-2023  润新知