@bahmutov/cypress-esbuild-preprocessor

Bundle Cypress specs using esbuild

Install

npm i -D cypress @bahmutov/cypress-esbuild-preprocessor esbuild
# note: this plugin assumes the esbuild is peer dependency

esbuild version support

esbuild version	cypress-esbuild-preprocessor version
< 0.17	< 2.2.0
>= 0.17	2.2.0

Use

Cypress v10+

In your config file add this module as a preprocessor

// cypress.config.js
import { defineConfig } from 'cypress'
import createBundler from '@bahmutov/cypress-esbuild-preprocessor'

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('file:preprocessor', createBundler())
    },
  },
})

Cypress before v10

In your plugin file use this module as the preprocessor

// cypress/plugins/index.js
const createBundler = require('@bahmutov/cypress-esbuild-preprocessor')
module.exports = (on, config) => {
  on('file:preprocessor', createBundler())
}

ESBuild options

If you want to pass your own ESBuild options

// cypress/plugins/index.js
const createBundler = require('@bahmutov/cypress-esbuild-preprocessor')
module.exports = (on, config) => {
  const bundler = createBundler({
    // any ESBuild options here
    // https://esbuild.github.io/api/
  })
  on('file:preprocessor', bundler)
}

Debugging

Run with the environment variable DEBUG=cypress-esbuild-preprocessor

But also if something is not working, check out the alternative package: cypress-esbuild-preprocessor

Breaking changes

v1 to v2

• instead of the file preprocessor, exposes a constructor function to allow user options to ESBuild

// v1
const bundler = require('cypress-esbuild-preprocessor')
module.exports = (on, config) => {
  on('file:preprocessor', bundler)
}

// v2
const createBundler = require('cypress-esbuild-preprocessor')
module.exports = (on, config) => {
  // pass ESBuild options to be applied to each spec file
  const bundler = createBundler({
    define: {
      'process.env.NODE_ENV': '"development"',
    },
  })
  on('file:preprocessor', bundler)
}

Small print

Author: Gleb Bahmutov <gleb.bahmutov@gmail.com> © 2022

• @bahmutov
• glebbahmutov.com
• blog
• videos
• presentations
• cypress.tips
• Cypress Tips & Tricks Newsletter
• my Cypress courses

License: MIT - do anything with the code, but don't blame me if it does not work.

Support: if you find any problems with this module, email / tweet / open issue on Github