How to properly import custom commands within cypress typescript project?

1
votes

After the update of my core depenencies, @nrwl/, @angular/ and cypress, my e2e tests are kind of broken. I receive the following error:

import './command'; ^ ParseError: 'import' and 'export' may appear only with 'sourceType: module'.

Cypress displays this error in addition: enter image description here

These are the updated dependencies: enter image description here

Until the update, we just imported custom commands directly from the command.ts-file in the spec-files. But also by using the support/index.ts the same error appears, but then in index-file.

The only thing, which worked (but can not be a solution actually), is to move the custom command into the index-file itself and remove the import statement(s).

And since I am operating these tests within a NX-Workspace, I do not have direct access to any webpack or babel config or something similar.

Any hint or idea, what I could try?

2
angulartypescriptcypressnrwlnrwl-nx

2 Answers

3
votes

I found the solution myself. The problem was, that I was missing the typescript preprocessor.

I don't know why, but until NX Version 7.4 (or even higher), it wasn't necessary to have a plugins file defined. Somehow NX covered that under the hood.

This is, what I had to change:

// plugins/index.js
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)

const { preprocessTypescript } = require('@nrwl/cypress/plugins/preprocessor');

module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config

  // Preprocess Typescript
  on('file:preprocessor', preprocessTypescript(config));
};

and referencing the file in cypress.json:

{
    "fileServerFolder": "./",
    "fixturesFolder": "./src/fixtures",
    "integrationFolder": "./src/integration",
    "pluginsFile": "./src/plugins/index",
    "supportFile": "./src/support/index.ts"
  }
2
votes

The error ParseError: 'import' and 'export' may appear only with 'sourceType: module'. is from eslint

To fix it add a .eslintrc.json file in the cypress/ directory with the content:

{
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  }
}