@bahmutov/cypress-esbuild-preprocessor

!cypress version !esbuild version [![ci status][ci image]][ci url]

> Bundle Cypress specs using esbuild

Install

``bash
npm i -D cypress @bahmutov/cypress-esbuild-preprocessor esbuild


note: this plugin assumes the esbuild is peer dependency


`

$3

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

Use

$3

In your config file add this module as a preprocessor

`js
// 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())
},
},
})
`

$3

In your plugin file use this module as the preprocessor

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

$3

If you want to pass your own ESBuild options

`js
// 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

$3

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

`js
// 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)
}
``

[ci image]: https://github.com/bahmutov/cypress-esbuild-preprocessor/workflows/ci/badge.svg?branch=main
[ci url]: https://github.com/bahmutov/cypress-esbuild-preprocessor/actions

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