Question

我想在我用赛普拉斯测试的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

如何解决此错误？

Answer 1

安装这些依赖项

纱线：

yarn add --dev @babel/preset-flow @cypress/browserify-preprocessor

npm

npm install --save-dev @babel/preset-flow @cypress/browserify-preprocessor

将此添加到您的cypress/plugins/index.js

const browserify = require('@cypress/browserify-preprocessor');

module.exports = (on, config) => {
    const options = browserify.defaultOptions;
    options.browserifyOptions.transform[1][1].presets.push(
        '@babel/preset-flow',
    );
    on('file:preprocessor', browserify(options));
};

如何在赛普拉斯中使用流量？

1 个答案: