Introduction: What is Wallaby.js?

Wallaby.js is an integrated continuous testing tool for JavaScript. It runs your tests immediately as you change your code (you don’t even have to save the file) and displays various results (including the code coverage, error and console messages) right inside your code editor, next to your code. Wallaby.js is great for doing JavaScript TDD (Test-driven development) or BDD (Behavior Driven Development), but it works great for other approaches as well.

Wallaby.js consists of editor plugin to provide features such as

and wallaby web app to provide strategic level features, such as the realtime bird’s eye view of your project’s tests connected to your editor:


Get started

To get started with wallaby.js in your editor, install the plugin, then have a look into our detailed tutorials for:

Along the way you will need to create a wallaby.js configuration file. There are a few sample projects with wallaby.js config files using various technologies to help you quickly create one.

Main Features

  • Supports continuous testing in your code editor:
    • WebStorm, IntelliJ IDEA, PhpStorm, Rider, RubyMine, PyCharm
    • Visual Studio Code
    • Atom Text Editor
    • Visual Studio 2017, Visual Studio 2019
    • Sublime Text
  • Supports browser code unit testing (via Chrome, PhantomJs, Electron or node.js) and node.js unit testing.
  • Shows live test coverage.
  • Allows quick inspection of object values.
  • Provides beautiful realtime test and coverage reports.
  • Shows failed expectations, errors and console.log messages inline, where and when they occur.
  • Shows compact and side-by-side diff views for failing equality assertions and snapshots.
  • Supports many testing frameworks (Jasmine, QUnit, Mocha, Jest + snapshots, and AVA).
  • Supports ES.next, JSX, Babel.
  • Supports TypeScript, CoffeeScript, Flow.
  • Supports Webpack and Browserify.
  • Extensible via preprocessors, compilers and more.
  • Runs tests affected by code changes.
  • Runs tests in parallel.
  • Runs selected test(s), can update individual test(s) snapshots.

How Wallaby differs from other test runners

With other test runners you either need to run your tests manually, or, at best, configure them to run the tests when you save your source code files. Those runners either execute all of your tests or, at best, all tests in all spec files affected by all uncommitted code changes, even if you are primarily editing just one file. So, as your project grows, it takes more and more time to complete the task. The test execution results are displayed somewhere outside of your code editor, and constant context switching to view the results is a productivity killer.

Wallaby.js runs your unit tests immediately as you type, no need to run anything manually, there’s even no need to save files. The tool calculates and runs the minimum required number of tests affected by your code changes, often it is just a single test - and no other testing tool is capable of operating on this level. So no matter how large your project grows - the feedback is almost instant with Wallaby.js. Test execution results, including code coverage, are displayed and updated in real time right where you need it — in your code editor, next to the line of code that you’re editing.

Supported Technologies

Wallaby supports lots of technologies, and we have a collection of sample projects with configuration files for different tools, frameworks and languages such as Jasmine, Mocha, QUnit, AVA, Jest, Webpack, Browserify, ES6 and ES7 via Babel, TypeScript, CoffeeScript, React, Angular, Vue, and node.js. You can find details of all supported technologies in our documentation.

Installation Dependencies

All you need to install is the Wallaby.js plugin for your code editor, period. No new command line tools or browser plugins. Our goal is not to add more things between you and the feedback from your tests. In fact, it’s the opposite: Wallaby.js eliminates unnecessary context switching, so it’s just you and your test feedback, right where and when you write your code.

Badges

Let the world know your project is using wallaby.js to test with this badge:

Wallaby.js

[![Wallaby.js](https://img.shields.io/badge/wallaby.js-configured-green.svg)](https://wallabyjs.com)