Build tests with Webpack and run them with Mocha in one command

Features

• Source-map support
• Builds and runs in-memory
• Inherits Mocha CLI
• Supports Webpack 5 + Mocha 8, 9, & 10

How does it compare to mocha-webpack / mochapack? Answered in the FAQ.

Support this project by ⭐️ starring and sharing it. Follow me to see what other cool projects I'm working on! ❤️

🚀 Install

npm i -D mocha webpack instant-mocha

Note: webpack and mocha are peer-dependencies so you can provide any version

👨‍🏫 Usage

instant-mocha [test paths/globs...]

You can either use npx (eg. npx instant-mocha ...) or add it to package.json scripts (eg. npm test) to invoke it.

Options

-w, --watch

Watch mode. Re-compiles the Webpack build and re-run tests on file-changes.

--webpack-config

Default: webpack.config.js

Path to the Webpack config.

Supports all options from Mocha CLI

For more info, run:

instant-mocha --help

Example

instant-mocha ---webpack-config webpack.config.js --require setup.js 'tests/*.spec.js'

• Load Webpack config from webpack.config.js
• Load setup script from setup.js. Note, this is not apart of the build and is loaded directly from Node.js
• Find and run tests that matches glob tests/*.spec.js

💁‍♀️ FAQ

How do I enable source-maps?

Set devtool: 'source-map' in your Webpack config.

How do I add a progress bar?

Add webpackbar to your Webpack config.

Are node_modules automatically externalized?

They can't be automatically externalized because it's possible some dependencies require bundling or pre-processing. For example, packages in ESM format or deep-dependencies that are stubbed for testing.

It's recommended to externalize what you can in your Webpack config to speed up the build though. Consider using webpack-node-externals to do this.

How is it different from mocha-webpack or its fork mochapack?

First of all, major thanks to mocha-webpack for the original implementation and serving the community.

This project was created from scratch because mocha-webpack is no longer maintained and doesn't have Webpack 5 support.

Some notable improvements include:

• Written in TypeScript whereas mocha-webpack uses Flow.
• Doesn't re-implement another file-watching mechanism Relies on Webpack's watcher instead.
• Loosely coupled with Mocha and Webpack The API surface used is very narrow so it works with most versions, (eg. Webpack 4 & 5).
• Correct exit codes Mocha and mocha-webpack returns the number of failed tests as the exit code. instant-mocha only uses exit code 1 for any test failures as per Bash convention.
• Smaller size Reuses a lot from Webpack & Mocha so it's much lighter: vs

💼 License

MIT © Hiroki Osame

Logo made by monkik