@cypress/browserify-preprocessor

@cypress/browserify-preprocessor is an official Cypress plugin that wires Browserify into Cypress’s file:preprocessor event, so spec, support, and plugin files are bundled before Cypress runs them in the browser. It ships default transforms for JavaScript, JSX, and CoffeeScript via Babel and Coffeeify, and automatically layers in Watchify so bundles are rebuilt incrementally while cypress open is running.

Beyond the defaults, it exposes browserifyOptions, watchifyOptions, an onBundle hook for direct access to the underlying Browserify instance, and an optional typescript path for transpiling (not type-checking) TypeScript specs. The maintainers have marked the project deprecated with no further development planned, since newer Cypress versions bundle files with webpack or esbuild-based preprocessors by default, but it remains installable and functional for projects that still rely on a Browserify-based pipeline.

What You Get

• A ready-made file:preprocessor handler that bundles specs, support files, and plugin files via Browserify
• Default transforms for JavaScript, JSX, and CoffeeScript through Babel and Coffeeify
• Automatic Watchify integration for incremental rebuilds during cypress open
• Configurable browserifyOptions/watchifyOptions plus an onBundle hook for direct Browserify instance access
• Optional TypeScript transpilation via a user-supplied typescript module path

Common Use Cases

• Running Cypress tests written in CoffeeScript or older JSX syntax that need Browserify-style bundling
• Migrating legacy Cypress projects that were scaffolded before webpack/esbuild preprocessors became the default
• Customizing the bundling pipeline with extra Browserify plugins or transforms via onBundle

Under The Hood

Architecture The package is a single ~300-line index.js that builds Browserify options by deep-cloning a defaultOptions object, merging in user-supplied browserifyOptions/watchifyOptions, and forcing fresh cache/packageCache objects on every build so Browserify’s incremental caching still fires update events correctly. It registers the resulting bundler as Cypress’s file:preprocessor handler, keeping an in-memory bundles map keyed by output path so repeated preprocessor calls for the same file reuse an existing Watchify-wrapped bundler instead of rebuilding from scratch. Tech Stack Built on browserify and watchify for bundling, babelify/@babel/* for JS/JSX transforms, coffeeify/coffeescript for CoffeeScript, bluebird for promise plumbing, and debug (namespaced cypress:browserify) for diagnostics; there’s a small simple_tsify.js helper under lib/ for the optional TypeScript path. Code Quality The project has a substantial test/unit and test/e2e suite run through Mocha, plus snapshot fixtures under __snapshots__/, and lint runs automatically before tests and on precommit via a pretest/precommit script. Error handling favors explicit, typed errors (throwError attaches a type from an errorTypes enum) for known misconfigurations like combining typescript with a tsify plugin. API Design The module exports a single configurable function (browserify(options)) whose defaults are exposed as browserify.defaultOptions so consumers can mutate a specific nested option (e.g. babelify’s babelrc flag) rather than re-declaring the whole options tree, which keeps the common override cases low-boilerplate; the tradeoff is that deeply nested option shapes (browserifyOptions.transform[1][1]) require knowing the internal structure to modify safely.