zoukankan      html  css  js  c++  java
  • 旧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过滤测试文件规则

  • 相关阅读:
    ORA-28000: the account is locked-的解决办法
    j对ava序列化的学习理解
    Oracle数据库中的时间格式和java中时间格式的转换
    抽象类和接口的区别
    glVertexAttribPointer
    运算符重载
    lua回调时把函数当参数传递时需注意的事项
    visual studio 编译文件生成路径
    UITableView自定义Cell中,纯代码编程动态获取高度
    ASP.NET发送邮件(QQ发送)
  • 原文地址:https://www.cnblogs.com/xy-ouyang/p/12175202.html
Copyright © 2011-2022 走看看