赛普拉斯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

万一有人来这里留言...

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

赛普拉斯TypeScript项目中的

...。答案是这样：

只要您有tsconfig.json文件，Cypress便会立即支持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文件夹中有这三个文件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
                        }
                    }
                ]
            }
        ]
    }
}

它应该现在就可以工作。

Answer 2

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

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

关于如何使用Webpack使赛普拉斯与现代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代码。

Answer 3

使用@ 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: {},
    }));
};

Answer 4

我解决了这个问题，在我的根文件夹中是一个babel.config.js文件，该文件可能会覆盖赛普拉斯的配置。删除后，一切正常。 ¯\ _（ツ）_ /¯

Answer 5

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

注意：如果您在 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"
  }
}