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!

@eric99 the mismatch of path is simply a sloppy attempt to privacy. Adding ".ts" I get a better error (the path worked): ```/Users/blahblahblah/src/data/Config.ts:1 export const MY_CONSTANT = 'MY_VALUE'; ^ ParseError: 'import' and 'export' may appear only with 'sourceType: module'``` — Nuthinking, Nov 12 '18 at 06:47
This plugin [cypress-webpack-preprocessor](https://github.com/cypress-io/cypress-webpack-preprocessor) allows ts imports to work. — , Nov 14 '18 at 00:10

score 16 · Answer 1 · edited Nov 14 '19 at 11:55

16

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

edited Nov 14 '19 at 11:55

Yukulélé

15,644
10
70
94

answered Jan 22 '19 at 10:54

Julien Malige

3,295
1
20
39

1

saved my life with error: ParseError: 'import' and 'export' may appear only with 'sourceType: module' – Filippo Rivolta Mar 26 '20 at 17:21
for cli-plugin-e2e-cypress for Vue3 this is necessary since it doesnt use cypress v4.4.0 – ProgrammedChem Nov 16 '20 at 15:46
the solution worked for me, because we use Vue, we also needed to add the following options into cypress/plugins/index.js: resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': path.resolve('src') } } – dgraf Oct 06 '22 at 10:35
Configuring plugins via `cypress/plugins/index.js` is no longer supported as of Cypress version 10.0.0. – DA_123 Jul 16 '23 at 23:10

score 6 · Answer 2 · answered Jun 09 '20 at 15:19

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.

Import project module in Cypress

2 Answers2