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!

Answer 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