Import project module in Cypress

Question

I want to import some constants from my project into my tests (for instance to test localstorage operations). While using import (or require) from my IDE doesn't show errors:

When running Cypress I get: Error: Cannot find module

The module is in TypeScript (Config.ts) despite doesn't use any particular feature.

I didn't modify any of the Command or Support script. But I have in the Cypress folder a tsconfig.json so that my Create React App can run without conflict with Jest.

{
  "extends": "../tsconfig",
  "include": ["../node_modules/cypress/types", "**/*.ts"]
}

I tried to add ../src or ../src/**/*.ts in the include but nothing seem to work.

What am I doing wrong? Thanks!

Solution 1

Add webpack, cypress-webpack-preprocessor and ts-loader if they are not already present:

yarn add --dev webpack @cypress/webpack-preprocessor ts-loader

In cypress/plugins/index.js just add this to your config:

const wp = require('@cypress/webpack-preprocessor')

module.exports = (on) => {
  const options = {
    webpackOptions: {
      resolve: {
        extensions: [".ts", ".tsx", ".js"]
      },
      module: {
        rules: [
          {
            test: /\.tsx?$/,
            loader: "ts-loader",
            options: { transpileOnly: true }
          }
        ]
      }
    },
  }
  on('file:preprocessor', wp(options))
}

Cypress should now load your TS files.

More information about a full TS config: https://basarat.gitbooks.io/typescript/docs/testing/cypress.html

Solution 2

As of April 2020 and cypress v4.4.0 this setup is not necessary anymore, as Cypress now supports typescript ootb.

Basically now you just have to add typescript (if not already present) to your project npm install typescript --save-dev and add a tsconfig.json into your cypress-folder, with content similiar to this:

{
  "compilerOptions": {
    "strict": true,
    "baseUrl": "../node_modules",
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress"]
  },
  "include": [
    "**/*.ts"
  ]
}

Taken from and see https://docs.cypress.io/guides/tooling/typescript-support.html#Set-up-your-dev-environment for more information.

Comments

[Filippo Rivolta]

saved my life with error: ParseError: 'import' and 'export' may appear only with 'sourceType: module'

[ProgrammedChem]

for cli-plugin-e2e-cypress for Vue3 this is necessary since it doesnt use cypress v4.4.0