Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
@cypress/webpack-preprocessor
Advanced tools
The @cypress/webpack-preprocessor package is a plugin for Cypress that allows you to use webpack to preprocess your JavaScript files before they are loaded into Cypress. This enables you to use webpack features such as ES6 syntax, importing CSS or images, and bundling your test files.
Preprocessing test files with webpack
This feature allows you to preprocess your test files using webpack. You can specify your webpack configuration and watch options. This is useful for using ES6/ESNext features, importing CSS, images, or other assets in your test files.
const webpackPreprocessor = require('@cypress/webpack-preprocessor');
module.exports = (on) => {
const options = {
webpackOptions: require('./webpack.config'),
watchOptions: {}
};
on('file:preprocessor', webpackPreprocessor(options));
};
Customizing webpack configuration
This feature allows you to customize the webpack configuration used for preprocessing. In this example, TypeScript files are being handled by adding a rule for `.ts` files and using the `ts-loader`.
const webpackPreprocessor = require('@cypress/webpack-preprocessor');
const webpackOptions = {
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: [{ loader: 'ts-loader' }]
}
]
}
};
const options = {
webpackOptions,
watchOptions: {}
};
module.exports = (on) => {
on('file:preprocessor', webpackPreprocessor(options));
};
While not a Cypress plugin, karma-webpack offers similar functionality for the Karma test runner. It preprocesses and bundles test files using webpack, similar to what @cypress/webpack-preprocessor does for Cypress.
Cypress preprocessor for bundling JavaScript via webpack
Requires Node version 6.5.0 or above.
npm install --save-dev @cypress/webpack-preprocessor
In your project's plugins file:
const webpack = require('@cypress/webpack-preprocessor')
module.exports = (register, config) => {
register('on:spec:file:preprocessor', webpack(config))
}
Pass in options as the second argument to webpack
:
const webpack = require('@cypress/webpack-preprocessor')
module.exports = (register, config) => {
const options = {
// send in the options from your webpack.config.js, so it works the same
// as your app's code
webpackOptions: require('../../webpack.config'),
watchOptions: {},
}
register('on:spec:file:preprocessor', webpack(config, options))
}
Object of webpack options. Just require
in the options from your webpack.config.js
to use the same options as your app.
Default:
{
module: {
rules: [
{
test: /\.jsx?$/,
exclude: [/node_modules/],
use: [{
loader: 'babel-loader',
options: {
presets: [
'babel-preset-env',
'babel-preset-react',
],
},
}],
},
],
},
}
Object of options for watching. See webpack's docs.
Default: {}
The default options are provided as webpack.defaultOptions
so they can be more easily modified.
If, for example, you want to update the options for the babel-loader
to add the stage-3 preset, you could do the following:
const webpack = require('@cypress/webpack-preprocessor')
module.exports = (register, config) => {
const options = webpack.defaultOptions
options.webpackOptions.module.rules[0].use.options.presets.push('babel-preset-stage-3')
register('on:spec:file:preprocessor', webpack(config, options))
}
This project is licensed under the terms of the MIT license.
FAQs
Cypress preprocessor for bundling JavaScript via webpack
The npm package @cypress/webpack-preprocessor receives a total of 863,848 weekly downloads. As such, @cypress/webpack-preprocessor popularity was classified as popular.
We found that @cypress/webpack-preprocessor demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.