node.js - 我如何在 Cypress 中使用流程？

Question

我想在使用 Cypress 测试的 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 中执行测试时，出现此错误:

/cypress/integration/TogableTimerForm.spec.jsx Module build failed (from ./node_modules/@cypress/webpack-preprocessor/node_modules/babel-loader/lib/index.js): Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/stein/Development/TimeLogging/TimeLogging/node_modules/babel-preset-flow/lib/index.js

How do I fix this error?

Answer 1

安装这些依赖项

yarn:

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));
};