javascript - Cypress ParseError : 'import' and 'export' may appear only with 'sourceType: module'

Question

我从 3.0.3 更新了 Cypress 至3.1.3 .我正在使用必须与文档相关的 ES6 导入/导出模块。但我收到了 undefined在终端中并在 GUI 中出现以下错误:

<root_dir>/node_modules/@babel/runtime/helpers/esm/defineProperty.js:1
export default function _defineProperty(obj, key, value) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

我的测试是在 vanilla JS 中，没有 TS os CoffeeScript。我卡住了，在 3.0.3它工作得很好。

Answer 1

此错误是由 Cypress 在浏览器中运行时存在“import”和“export”等现代关键字引起的。与 Selenium 或 Protractor 不同——它实际上在浏览器中运行。由于浏览器还不支持现代 JS，你需要使用 webpack 或 browserify 来转译你的代码。

https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples

这是一篇关于如何让 Cypress 使用 webpack 与现代 JS 和 Typescript 一起工作的精彩博客文章:
https://glebbahmutov.com/blog/use-typescript-with-cypress/

^^ 这篇文章的重点是 TypeScript，但 Javascript 的配置选项将是类似的。

必须在 package.json 中安装以下 npm 包:

"@cypress/webpack-preprocessor": "^4.1.0",
"cypress": "^3.3.1",
"ts-loader": "^6.0.3",
"typescript": "^3.5.2",
"webpack": "^4.34.0"

应使用以下方式安装 Webpack:

npm install --save-dev webpack typescript ts-loader
npm install --save-dev @cypress/webpack-preprocessor

以下内容应出现在根目录中名为 tsconfig.json 的文件的“compilerOptions”部分下，对于非 typescript 用户，“allowJs”设置为 true:

"module": "es6",
"target": "es6",
"types": ["cypress"],
"allowJs": true

一个名为“webpack.config.js”的文件应该存在于您的根目录中，其中包含以下内容:

const path = require('path')

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

这些导出应该存在于 cypress/plugins/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 插件文件末尾的最后一点，

on('file:preprocessor', webpack(options))

这就是 Cypress 被告知以使其可运行的方式处理您的现代 JS 代码的地方。