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

  • 相关阅读:
    修改msn密碼的地址
    Global.asax.cs中的方法的含义 Application_AcquireRequestState验证Session[轉]
    工作筆記DMIS項目
    给创业者的忠告
    Windows 2008 / Windows 7 x64: The ‘Microsoft.Jet.OLEDB.4.0′ provider is not registered on the local machine.
    Case Study: Nick Leeson and The Barings Debacle
    如何减小MS SQL Server的Log文件尺寸
    如何使windows7的默认共享可以被访问
    Android 开发人员必须掌握的 10 个开发工具
    在Windows Server 2008 R2上设置FTP 服务
  • 原文地址:https://www.cnblogs.com/xy-ouyang/p/12175202.html
Copyright © 2011-2022 走看看