如何解决 Cypress 自动化测试时 Unexpected token 'import' 错误？

背景

在使用 Cypress 进行自动化测试时，有时候会遇到 Unexpected token 'import' 的错误，这是因为 Cypress 默认使用的是 Mocha 测试框架，而 Mocha 不支持 ES6 模块语法。

解决方法

方法一：将代码转换为 CommonJS 模块

将代码中的 ES6 模块语法转换为 CommonJS 模块语法，可以使用 Babel 来进行转换。首先需要安装 @babel/core 和 @babel/preset-env 两个依赖：

npm install --save-dev @babel/core @babel/preset-env

在项目根目录下创建一个 .babelrc 文件，内容如下：

{
  "presets": ["@babel/preset-env"]
}

然后在 cypress/plugins/index.js 文件中配置 Cypress 使用 Babel 进行转换：

const browserify = require('@cypress/browserify-preprocessor')
const babelify = require('babelify')

module.exports = (on, config) => {
  const options = browserify.defaultOptions
  options.browserifyOptions.transform[1][1].plugins.push([babelify, { presets: ['@babel/preset-env'] }])
  on('file:preprocessor', browserify(options))
}

方法二：使用 Cypress 支持的 ES6 模块语法

Cypress 支持 ES6 模块语法，只需要在 cypress.json 文件中配置 moduleDirectories 选项：

{
  "baseUrl": "http://localhost:3000",
  "moduleDirectories": ["node_modules", "cypress"]
}

然后在测试文件中使用 ES6 模块语法即可：

import { login } from 'actions'

describe('Login', () => {
  it('should login successfully', () => {
    login('username', 'password')
  })
})

总结

以上就是解决 Cypress 自动化测试时 Unexpected token 'import' 错误的两种方法，如果您的项目中使用了大量的 ES6 模块语法，那么建议使用第一种方法进行转换，否则可以选择第二种方法。希望本文能对您有所帮助！

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6556beaad2f5e1655d11ddee