How to use mixing in cypress of vue/cli 4 app?

Question

In vue/cli 4 app using cypress for testing I want to use my mixing and for this in my tests/e2e/specs/fileupload_tests.js I added declaration:

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', () => {
        ...

But I see error in my browser : /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'

That is not error of invalid mixing path - in this case I got different error.

Which way is valid ?

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

MODIFIED : I commented import in my fileupload_tests.js file

and I added 1 line in tests/e2e/support/index.js :

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

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

But running the test have error anyway:

/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'

In my project I have some config files, like cypress.json or babel.config.js Can it be that I have to add mixing declarations in one of these files? If Yes, in which format?

MODIFIED # 2: I successfully run command

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

and after that running tests I always got error :

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

Even if in my tests.js I commented all “import ” lines

My 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"
      ]
    }
  }
}

Was it wrong version of babel ? Which is Correct ?

Thanks!

Can you try declaring the import statements in cypress/support/index.js file. — Sree.Bh

flakerimi flakerimi · Accepted Answer · 2020-06-03T01:39:07

@babel/runtime/helpers/esm/typeof.js

Can you try with older version of babel, just do npm install babel-preset-es2015 --save-dev

It turns out that earlier Babel was shipping with all the required plugin, including one that translates ES6 to ES5. But since Babel 6.0, you have to explicitly include plugins or presets (which include certain predefined plugins). So we will install Babel preset es2015 .

Source

How to use mixing in cypress of vue/cli 4 app?

1 Answers