[英]Cypress ParseError: 'import' and 'export' may appear only with 'sourceType: module'
I updated Cypress from 3.0.3
to 3.1.3
.我将赛普拉斯从3.0.3
更新到3.1.3
。 Im using ES6 import/export modules which must be working related to docs.我正在使用必须与文档相关的 ES6 导入/导出模块。 But Im getting a line with undefined
in terminal and following error in the GUI:但是我在终端中得到一行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'
My tests are in vanilla JS, no TS os CoffeeScript.我的测试是在 vanilla JS 中进行的,没有 TS os CoffeeScript。 Im stuck, in 3.0.3
it worked fine.我卡住了,在3.0.3
中它运行良好。
This error is caused by the presence of modern keywords like "import" and "export" when Cypress runs in the browser.当 Cypress 在浏览器中运行时,此错误是由于存在“import”和“export”等现代关键字引起的。 Unlike Selenium or Protractor -- it actually runs inside the browser.与 Selenium 或 Protractor 不同——它实际上在浏览器中运行。 Since browsers don't support modern JS yet, you'll need to use webpack or browserify to transpile your code.由于浏览器尚不支持现代 JS,因此您需要使用 webpack 或 browserify 来转换代码。
https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples
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/这是一篇关于如何使用 webpack 让 Cypress 与现代 JS 和 Typescript 一起工作的精彩博客文章: https ://glebbahmutov.com/blog/use-typescript-with-cypress/
^^ The post is focused on TypeScript, but the configuration options for Javascript will be similar. ^^ 这篇文章的重点是 TypeScript,但是 Javascript 的配置选项是相似的。
The following npm packages must be installed and in your package.json:必须安装以下 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 should be installed using:应使用以下方式安装 Webpack:
npm install --save-dev webpack typescript ts-loader
npm install --save-dev @cypress/webpack-preprocessor
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:以下内容应出现在根目录中名为 tsconfig.json 的文件的“compilerOptions”部分下,对于非打字稿用户,“allowJs”设置为 true:
"module": "es6",
"target": "es6",
"types": ["cypress"],
"allowJs": true
A file called "webpack.config.js" should be present in your root directory with the following:一个名为“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')
}
}
And these exports should be present under cypress/plugins/index.js:这些出口应该存在于 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))
That is where Cypress is told to process your modern JS code in such a way as to make it Cypress-runnable.这就是 Cypress 被告知以使其可在 Cypress 上运行的方式处理现代 JS 代码的地方。
I solved it, in my root folder was a babel.config.js
file which possibly overrode Cypress configs.我解决了它,在我的根文件夹中有一个babel.config.js
文件,它可能覆盖了 Cypress 配置。 After I deleted it, everything is working.在我删除它之后,一切正常。 ¯\_(ツ)_/¯ ¯\_(ツ)_/¯
Update: Maybe the magic was readd the babel.config.js
with this content based on this issue: https://github.com/cypress-io/cypress/issues/2945更新:也许魔法是基于这个问题用这个内容babel.config.js
: https ://github.com/cypress-io/cypress/issues/2945
module.exports = process.env.CYPRESS_ENV
? {}
: { presets: ['@vue/babel-preset-app'] }
In case people are coming here for the message...万一有人来这里发消息...
ParseError: 'import' and 'export' may appear only with 'sourceType: module' ParseError: 'import' 和 'export' 可能只与 'sourceType: module' 一起出现
... in a Cypress TypeScript project. ...在 Cypress TypeScript 项目中。 Here is the answer:这是答案:
Cypress does support TypeScript out of the box, as long as you have a tsconfig.json
file.只要你有一个tsconfig.json
文件,赛普拉斯就支持开箱即用的 TypeScript。 However, imports don't work unless you preprocess your TypeScript files.但是,除非您预处理 TypeScript 文件,否则导入不起作用。
Here are the steps:以下是步骤:
yarn add -D webpack
安装webpack: yarn add -D webpack
yarn add -D ts-loader
安装 ts-loader: yarn add -D ts-loader
yarn add -D @cypress/webpack-preprocessor
安装@cypress/webpack-preprocessor: yarn add -D @cypress/webpack-preprocessor
Now, make sure you have these 3 files, tsconfig.json
, webpack.config.js
and plugins/index.js
on your Cypress folder.现在,确保你的 Cypress 文件夹中有这 3 个文件, tsconfig.json
、 webpack.config.js
和plugins/index.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
: tsconfig.json
:
{
"compilerOptions": {
"strict": true,
"target": "es5",
"lib": ["es5", "dom"],
"types": ["cypress"]
},
"include": [
"**/*.ts"
]
}
webpack.config.js
: 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
}
}
]
}
]
}
}
It should just work now.它现在应该可以工作了。
When using @vue/cli you can simply do (which is commented in Cypress /plugins/index.js
):当使用 @vue/cli 时,你可以简单地做(在 Cypress /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: {},
}));
};
There is an official sample on github available at this address https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/preprocessors__typescript-webpack在这个地址https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/preprocessors__typescript-webpack上有一个 github 上的官方示例
Note: if you are on windows and want to run localy the project , first update the path in the package.json.注意:如果您在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"
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.