Classes and inheritance with Vue CLI-generated Cypress tests

This is going to be a quick one but took forever to figure out. Brace yourself!

The setup

You have a project that is managed by vue-cli and you have end to end tests created with Cypress (all stock!). Now you want to move it to the next level and use wrappers as described in this tutorial.

The problem

When you try to create classes in separate modules the strangest thing happens:

import _typeof from "../../helpers/esm/typeof";
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

This is easy to fix. Just install @cypress/webpack-preprocessor package and follow the instructions in tests/e2e/plugins/index.js - it's all there.

But the moment you'll try to use them... all of the sudden no tests are found.

The Solution

The actual issue here is transpilation and yes, you've guessed it - it has to do with Internet Explorer support. The fix is super easy.

Go to .browserslistrc and add the following line at the end of the file:

not ie > 0

And live is good again :) I so hope the masacre called Internet Explorer will be over really soon!

Happy coding!