vuejs2 - 如何在 vue/cli 4 应用程序的 cypress 中使用混合？

问题描述

在使用 cypress 进行测试的 vue/cli 4 应用程序中，我想使用我的混合，为此在我的 tests/e2e/specs/fileupload_tests.js 中我添加了声明：

import faker from 'faker'
import 'cypress-file-upload'
import appMixin from '../../../src/appMixin'        // Full path is src/appMixin.js

describe('Admin category fileupload functionality', () => {
    it('category fileupload', () => {
        ...

但我在浏览器中看到错误：/mnt/_work_sdb8/wwwroot/lar/VApps/vtasks/node_modules/@babel/runtime/helpers/esm/typeof.js:1

export default function _typeof(obj) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

这不是无效混合路径的错误——在这种情况下，我得到了不同的错误。

哪种方式有效？

"axios": "^0.19.0",
"core-js": "^3.3.2",
"cypress-file-upload": "^3.5.3",
"vue": "^2.6.10",

修改： 我在我的 fileupload_tests.js 文件中评论了 import

我在 tests/e2e/support/index.js 添加了 1 行：

import appMixin from '../../../src/appMixin'        // src/appMixin.js

// Import commands.js using ES2015 syntax:
import './commands'

但是运行测试还是有错误：

/mnt/_work_sdb8/wwwroot/lar/VApps/vtasks/node_modules/@babel/runtime/helpers/esm/typeof.js:1
export default function _typeof(obj) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

在我的项目中，我有一些配置文件，例如 cypress.json 或 babel.config.js 是不是我必须在其中一个文件中添加混合声明？如果是，采用哪种格式？

修改#2： 我成功运行命令

npm install babel-preset-es2015 --save-dev

在那之后运行测试我总是得到错误：

/node_modules/@babel/runtime/helpers/esm/typeof.js:1
export default function _typeof(obj) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

即使在我的 tests.js 中我评论了所有“import”行

我的 package.json ：

{
  "name": "ctasks",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:e2e": "vue-cli-service test:e2e",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@voerro/vue-tagsinput": "^2.2.0",
    "axios": "^0.19.0",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "core-js": "^3.3.2",
    "cypress-file-upload": "^3.5.3",
    "file-saver": "^2.0.2",
    "font-awesome": "^4.7.0",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.27",
    "v-money": "^0.8.1",
    "vee-validate": "^3.1.0",
    "vue": "^2.6.10",
    "vue-avatar": "^2.1.8",
    "vue-context-menu": "^2.0.6",
    "vue-focus": "^2.1.0",
    "vue-head": "^2.2.0",
    "vue-js-modal": "^1.3.31",
    "vue-nav-tabs": "^0.5.7",
    "vue-notification": "^1.3.20",
    "vue-router": "^3.1.3",
    "vue-select": "^3.2.0",
    "vue-simple-calendar": "^4.3.2",
    "vue-simple-suggest": "^1.10.1",
    "vue-slider-component": "^3.1.1",
    "vue-the-mask": "^0.11.1",
    "vue-upload-component": "^2.8.20",
    "vue-wysiwyg": "^1.7.2",
    "vue2-datepicker": "^3.3.0",
    "vue2-filters": "^0.8.0",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.0.0",
    "@vue/cli-plugin-e2e-cypress": "~4.2.0",
    "@vue/cli-plugin-eslint": "~4.2.0",
    "@vue/cli-plugin-router": "^4.0.0",
    "@vue/cli-plugin-vuex": "^4.0.0",
    "@vue/cli-service": "^4.0.0",
    "babel-eslint": "^10.0.3",
    "bootstrap": "^4.3.1",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.1.2",
    "faker": "^4.1.0",
    "jquery": "^3.4.1",
    "node-sass": "^4.12.0",
    "popper.js": "^1.16.0",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "semi": [
        2,
        "never"
      ]
    }
  }
}

它是错误的 babel 版本吗？哪个是对的？

谢谢！

标签： vuejs2cypress

vuejs2 - 如何在 vue/cli 4 应用程序的 cypress 中使用混合？

问题描述

解决方案

推荐阅读