Cypress Webpack Preprocessor (Batteries Included)

Cypress preprocessor for bundling JavaScript via Webpack, with dependencies included and support for:

• Various proposal-stage ES features
• TypeScript
• CoffeeScript

Why?

This preprocessor is a wrapper for @cypress/webpack-preprocessor. The webpack preprocessor does not include any extra dependencies (e.g. babel-loader, ts-loader), since most users will use their own webpack.config.js with it and already have the necessary dependencies installed. This preprocessor is for users who do not have those dependencies installed and would prefer not to configure the preprocessor to handle things like TypeScript and CoffeeScript.

Installation

Note that installing @cypress/webpack-preprocessor is also required. This allows you to update its version separately from this wrapper.

For webpack v5, use @cypress/[email protected] and up. For webpack v4, use @cypress/[email protected].

npm install --save-dev @cypress/webpack-batteries-included-preprocessor @cypress/webpack-preprocessor

Usage

In your project's cypress.config.js file:

const webpackPreprocessor = require('@cypress/webpack-batteries-included-preprocessor')

module.exports = (on) => {
  on('file:preprocessor', webpackPreprocessor())
}

To enable TypeScript support, install TypeScript (if not already installed in your project npm install --save-dev typescript) and provide its location with the typescript option:

const webpackPreprocessor = require('@cypress/webpack-batteries-included-preprocessor')

module.exports = (on) => {
  on('file:preprocessor', webpackPreprocessor({
    typescript: require.resolve('typescript')
  }))
}

As of version 4.x.x, @cypress/webpack-batteries-included-preprocessor only includes the buffer, path, process, os, and stream built-ins. If your project requires built-ins not provided, you can retrieve the preprocessor's default Webpack options and decorate them as needed.

const webpackPreprocessor = require('@cypress/webpack-batteries-included-preprocessor')

function getWebpackOptions () {
  const options = webpackPreprocessor.getFullWebpackOptions()

  // add built-ins as needed
  options.resolve.fallback.zlib = require.resolve('browserify-zlib')

  return options
}

module.exports = (on) => {
  on('file:preprocessor', webpackPreprocessor({
    webpackOptions: getWebpackOptions()
  }))
}

Please see [resolve.fallback](see https://webpack.js.org/configuration/resolve/#resolvefallback) for more information on what built-ins can be shimmed.

Other than the typescript option, this preprocessor supports the same options as @cypress/webpack-preprocessor, so see its README for more information.

Debugging

If having issues with chunk load errors or bundle size problems, specifically in your end-to-end tests, please try setting DEBUG=cypress-verbose:webpack-batteries-included-preprocessor:bundle-analyzer before starting Cypress to get a webpack-bundle-analyzer report to help determine the cause of the issue. If filing an issue with Cypress, please include this report with your issue to better help us serve your issue.

Contributing

Use the version of Node that matches Cypress.

Run the tests:

yarn test

License

This project is licensed under the terms of the MIT license.

Changelog

Changelog