赛普拉斯ParseError：“导入”和“导出”可能仅与“ sourceType：模块”一起出现

Question

我已将赛普拉斯从更新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'

我的测试使用的是普通JS，没有TS os CoffeeScript。我陷入困境，在3.0.3它工作正常。

Answer 1

赛普拉斯在浏览器中运行时，此错误是由诸如“导入”和“导出”之类的现代关键字引起的。与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的配置选项将相似。

必须在您的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”部分下应显示以下内容，对于非打字稿用户，“ 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代码。

Answer 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'] }

Answer 3

如果人们来这里是为了消息...

ParseError: 'import' 和 'export' 可能只与 'sourceType: module' 一起出现

...在赛普拉斯 TypeScript 项目中。这是答案：

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

以下是步骤：

1. 安装 webpack： yarn add -D webpack
2. 安装 ts-loader： yarn add -D ts-loader
3. 安装@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
                        }
                    }
                ]
            }
        ]
    }
}

它现在应该可以工作了。