Cypress ParseError：“import”和“export”可能只出现在“sourceType：module”中答案

【问题标题】：Cypress ParseError: 'import' and 'export' may appear only with 'sourceType: module'Cypress ParseError：“import”和“export”可能只出现在“sourceType：module”中
【发布时间】：2019-05-08 01:54:29
【问题描述】：

我将赛普拉斯从 3.0.3 更新为 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 中它运行良好。

【问题讨论】：

这是我能找到的唯一一个特定于在赛普拉斯框架中解决此错误的问题。

标签： javascript babeljs browserify e2e-testing cypress

【解决方案1】：

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

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

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

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

必须安装以下 npm 包并在您的 package.json 中：

"@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”部分下，对于非打字稿用户，“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))
}

请注意赛普拉斯插件文件末尾的最后一点，

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

这就是赛普拉斯被告知以使其可在赛普拉斯运行的方式处理现代 JS 代码的地方。

【讨论】：

谢谢@emery！这为我解决了一切问题！
我试过了，现在我得到了一个不同的错误：Module not found: Error: Can't resolve 'child_process' in ... :-(
我找到了错误的原因：我在文件的开头有import "cypress"（因为之前WebStorm 将describe 标记为未知名称）。删除此行后，它起作用了！
我已经尝试过这个，但我已经有了一个非常强大的 webpack 配置文件。当我在最终的“文件加载器”之前插入这个 webpack 配置代码时，我能够加载 cypress“主”屏幕和我的 React 应用程序，但我仍然无法运行测试。很多各种 webpack 错误，虽然我确实得到了一堆 Typescript 错误，尽管我的文件没有看到我安装的 cypress 类型的事实是一个完全独立的问题 (stackoverflow.com/q/58982852/6826164)
ES 模块和 import 关键字自 Chrome 61 @emery 开始支持 ?

【解决方案2】：

我解决了，在我的根文件夹中有一个babel.config.js 文件，它可能会覆盖赛普拉斯的配置。删除后，一切正常。 ¯\_(ツ)_/¯

更新： 也许魔法是基于这个问题阅读了babel.config.js的内容：https://github.com/cypress-io/cypress/issues/2945

module.exports = process.env.CYPRESS_ENV
  ? {}
  : { presets: ['@vue/babel-preset-app'] }

【讨论】：

能否分享您的 cypress 配置设置，以便我们从您的解决方案中受益？
嗨 @emery 是的，我的 cypress 配置基于 official docs，没有添加任何特殊内容。我用我的新 babel.config.js 的内容更新了我的答案。
CYPRESS_ENV 已重命名为 CYPRESS_INTERNAL_ENV

【解决方案3】：

万一有人来这里发消息……

ParseError: 'import' 和 'export' 可能只出现在 'sourceType: module' 中

... 在赛普拉斯 TypeScript 项目中。答案如下：

赛普拉斯确实支持开箱即用的 TypeScript，只要您有一个 tsconfig.json 文件。但是，imports 不起作用，除非您预处理您的 TypeScript 文件。

步骤如下：

安装 webpack：yarn add -D webpack
安装ts-loader：yarn add -D ts-loader
安装@cypress/webpack-preprocessor：yarn add -D @cypress/webpack-preprocessor

现在，确保您的 Cypress 文件夹中有这 3 个文件，tsconfig.json、webpack.config.js 和 plugins/index.js。

plugins/index.js:

const wp = require("@cypress/webpack-preprocessor");

module.exports = on => {
    const options = {
        webpackOptions: require("../webpack.config.js")
    };
    on("file:preprocessor", wp(options));
};

tsconfig.json:

{
  "compilerOptions": {
    "strict": true,
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress"]
  },
  "include": [
    "**/*.ts"
  ]
}

webpack.config.js:

module.exports = {
    mode: 'development',
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                exclude: [/node_modules/],
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            // skip typechecking for speed
                            transpileOnly: true
                        }
                    }
                ]
            }
        ]
    }
}

它现在应该可以工作了。

【讨论】：

花费数小时后“transpileOnly: true”工作了！谢谢:)
我试过上面的那个，但对我不起作用。你能看看这个question

【解决方案4】：

使用@vue/cli 时，您可以简单地做（在赛普拉斯/plugins/index.js 中有注释）：

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

module.exports = (on, config) => {
    on('file:preprocessor', webpack({
        webpackOptions: require('@vue/cli-service/webpack.config'),
        watchOptions: {},
    }));
};

【讨论】：

【解决方案5】：

github上有官方示例，地址https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/preprocessors__typescript-webpack

注意：如果您在 windows 上并希望在本地运行项目，请首先更新 package.json 中的路径。

// D:\path\cypress-example-recipes\examples\preprocessors__typescript-webpack\package.json

{
  "name": "cypress-example-typescript-webpack",
  "version": "1.0.0",
  "description": "Example showing TypeScript tests with Cypress",
  "scripts": {
    // ...
    "cypress:open": "..\\..\\node_modules\\.bin\\cypress open"
  }
}

【讨论】：