我想在我用赛普拉斯测试的React应用程序中使用Flow我使用Web预处理器插入流预设 . 首先,我在./cypress/plugin/index.js中编写预处理器代码:

const webpack = require('@cypress/webpack-preprocessor')

module.exports = (on) => {
  const options = {
    // send in the options from your webpack.config.js, so it works the same
    // as your app's code
    webpackOptions: require('../../webpack.config'),
    watchOptions: {}
  }
  on('file:preprocessor', webpack((options)))
}

然后我安装@ cypress / webpack-preprocessor'和@ babel / preset-flow package.json看起来像这样:

{
      "name": "TimeLogging",
      "version": "1.0.0",
      "description": "React Time Logging",
      "main": "index.js",
      "engines": {
        "node": "8.11.4",
        "npm": "5.6.0"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject",
        "cypress:open": "cypress open",
        "cypress:run": "cypress run",
        "eslint": "eslint",
        "flow": "flow"
      },
      "author": "CodeMix",
      "license": "ISC",
      "dependencies": {
        "flow-bin": "^0.81.0",
        "prop-types": "^15.6.2",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "react-scripts": "^1.1.1"
      },
      "devDependencies": {
        "@babel/preset-flow": "^7.0.0",
        "@cypress/webpack-preprocessor": "^3.0.0",
        "cypress": "^3.1.0",
        "enzyme": "^3.6.0",
        "enzyme-adapter-react-16": "^1.5.0",
        "eslint": "^4.19.1",
        "eslint-config-standard": "^12.0.0",
        "eslint-plugin-cypress": "^2.0.1",
        "eslint-plugin-import": "^2.14.0",
        "eslint-plugin-node": "^7.0.1",
        "eslint-plugin-promise": "^4.0.1",
        "eslint-plugin-react": "^7.11.1",
        "eslint-plugin-standard": "^4.0.0"
      }
    }

> And the webpack.config.js looks like this:

    module: {

        rules: [
          {{
            test: /\.(js|jsx?)$/,
            exclude: [/node_modules/],
            use: [{
              loader: 'babel-loader',
              options: {
                presets: [
                  'babel-preset-env',
                  'babel-preset-react',
                  'babel-preset-flow'

                ],
              },
            }],
          },
        ]
      }
    }

当我在赛普拉斯执行测试时,我收到此错误:

/cypress/integration/TogableTimerForm.spec.jsx模块构建失败(来自./node_modules/@cypress/webpack-preprocessor/node_modules/babel-loader/lib/index.js):错误:不允许插件/预设文件导出对象,只有函数 . 在/Users/stein/Development/TimeLogging/TimeLogging/node_modules/babel-preset-flow/lib/index.js如何修复此错误?