赛普拉斯ParseError:“导入"和“导出"可能仅与"sourceType:模块"一起出现 [英] Cypress ParseError: 'import' and 'export' may appear only with 'sourceType: module'

问题描述

我将赛普拉斯从3.0.3更新为了3.1.3.我正在使用必须与文档相关的ES6导入/导出模块.但是我在终端中出现undefined行，并且在GUI中出现以下错误:

I updated Cypress from 3.0.3 to 3.1.3. Im using ES6 import/export modules which must be working related to docs. But Im getting a line with undefined in terminal and following error in the 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上工作正常.

My tests are in vanilla JS, no TS os CoffeeScript. Im stuck, in 3.0.3 it worked fine.

推荐答案

当Cypress在浏览器中运行时，此错误是由现代关键字(例如"import"和"export")的存在引起的.与Selenium或Protractor不同-它实际上在浏览器中运行.由于浏览器尚不支持现代JS，因此您需要使用webpack或browserify来翻译代码.

This error is caused by the presence of modern keywords like "import" and "export" when Cypress runs in the browser. Unlike Selenium or Protractor -- it actually runs inside the browser. Since browsers don't support modern JS yet, you'll need to use webpack or browserify to transpile your code.

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

关于如何使用webpack使赛普拉斯与现代JS和Typescript一起使用，这是一篇很棒的博客文章: https://glebbahmutov.com/blog/use-typescript-with-cypress/

Here is a fantastic blog post on how to get Cypress to work with modern JS and Typescript using webpack: https://glebbahmutov.com/blog/use-typescript-with-cypress/

^^这篇文章主要讨论TypeScript，但是Javascript的配置选项与此类似.

^^ The post is focused on TypeScript, but the configuration options for Javascript will be similar.

以下npm软件包必须已安装并在package.json中:

The following npm packages must be installed and in your 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应该使用以下方式安装:

Webpack should be installed using:

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

在根目录中名为tsconfig.json的文件的"compilerOptions"部分下应显示以下内容，对于非打字稿用户，将"allowJs"设置为true:

The following should be present under the "compilerOptions" section of a file called tsconfig.json in your root directory, with "allowJs" set to true for non-typescript users:

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

您的根目录中应包含一个名为"webpack.config.js"的文件，其中包含以下内容:

A file called "webpack.config.js" should be present in your root directory with the following:

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下:

And these exports should be present under 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))
}

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

Note this final bit at the end of the Cypress plugins file,

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

在那儿，赛普拉斯被告知以使其可以赛普拉斯可运行的方式处理现代JS代码.

That is where Cypress is told to process your modern JS code in such a way as to make it Cypress-runnable.

这篇关于赛普拉斯ParseError:“导入"和“导出"可能仅与"sourceType:模块"一起出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！