typescript-cypress

1.0.5 verified Fri May 01 auth: no javascript

A Cypress plugin that transpiles TypeScript test files using Webpack during test execution. Version 1.0.5 is current and appears to be a stable release. The plugin wraps a custom Webpack configuration with loaders like babel-loader and TypeScript presets, writes the bundled output to a temporary `tests_build` folder inside `cypress`, and deletes it after the browser closes. Unlike the official @cypress/webpack-preprocessor or cypress-webpack-preprocessor, this package bundles its own Webpack configuration and requires users to manually define loaders. It has no recent updates and limited community adoption. Key differentiator: provides a ready-to-use transpiler wrapper but lacks flexibility and documentation for complex setups.

Common errors

error Cannot find module 'typescript-cypress' ↓

cause The package is not installed or is listed in devDependencies but not resolved.

fix

Run npm install typescript-cypress --save-dev and ensure node_modules contains it.

error TypeError: typescriptCypressTranspiler is not a function ↓

cause Using default import instead of named import; the package exports an object with the function.

fix

Use const { typescriptCypressTranspiler } = require('typescript-cypress');

error Module parse failed: Unexpected token (1:8) in cypress/integration/example.spec.ts ↓

cause Webpack configuration does not include a rule for .tsx? files or required loaders are missing.

fix

Ensure the module rules include test: /\.tsx?$/ with appropriate loaders (babel-loader + presets).

error Error: Cannot find module 'webpack' ↓

cause Webpack is not installed; the plugin does not bundle webpack as a dependency.

fix

Install webpack version 4: npm install webpack@4.41.5 --save-dev.

Warnings

gotcha The package is CommonJS-only; using ESM imports will fail with a Module not found error. ↓

fix Use require() instead of import.

gotcha The package creates a temporary folder 'tests_build' inside cypress/ which may conflict with other plugins or custom folders. ↓

fix Ensure no other plugin uses the same folder name, or consider using an alternative preprocessor that allows custom output paths.

gotcha Webpack 4.41.5 is the only tested version; using Webpack 5 may cause incompatibilities due to removed Node.js polyfills or changed API. ↓

fix Use Webpack 4.41.5 or check compatibility with your version; consider using @cypress/webpack-preprocessor for broader support.

gotcha The package deletes the tests_build folder on browser close; if the browser crashes, leftovers may persist and accumulate. ↓

fix Manually delete cypress/tests_build if you encounter stale files or build errors.

Install

npm install typescript-cypress

yarn add typescript-cypress

pnpm add typescript-cypress

Imports

typescriptCypressTranspiler

wrong

import { typescriptCypressTranspiler } from 'typescript-cypress'

correct

const { typescriptCypressTranspiler } = require('typescript-cypress')

Package is CommonJS-only; ESM import will fail.

default export
```
const typescriptCypressTranspiler = require('typescript-cypress')
```
Package does not have a default export; its default export is undefined, so `require('typescript-cypress').typescriptCypressTranspiler` is required.

typescriptCypressTranspiler

wrong

const { typescriptCypressTranspiler } = require('typescript-cypress')

correct

const { typescriptCypressTranspiler } = require('typescript-cypress').default

Because there is no default export, using `.default` will be undefined. CommonJS pattern above is correct.

Quickstart

Shows how to configure typescript-cypress in cypress/plugins/index.js with a custom Webpack module rule using babel-loader and TypeScript presets.

// Install: npm i typescript-cypress -D
// cypress/plugins/index.js
const { typescriptCypressTranspiler } = require('typescript-cypress');

const _module = {
  rules: [
    {
      test: /\.tsx?$/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env'],
              '@babel/preset-typescript',
              ['@babel/preset-react', { development: true }]
            ],
            plugins: [
              '@babel/plugin-transform-destructuring',
              '@babel/plugin-proposal-object-rest-spread',
              '@babel/plugin-transform-typescript',
              '@babel/plugin-transform-parameters',
              '@babel/plugin-proposal-export-default-from',
              ['@babel/plugin-transform-runtime', { corejs: 2 }]
            ]
          }
        }
      ],
      exclude: /node_modules/
    }
  ]
};

module.exports = (on, config) => {
  on('file:preprocessor', typescriptCypressTranspiler(_module));
};