Real-Time Test Feedback in Your Editor
If you're a JavaScript developer, you probably know the rhythm of writing code, tabbing to a terminal, running tests, waiting, and tabbing back. Wallaby.js is a test runner designed to eliminate that context switching by continuously running your tests and reporting results directly in your editor, before you even hit save. This article walks through getting it running with a React app in VS Code.
How Wallaby.js Works
Wallaby.js is an intelligent test runner that runs your tests as you type. It provides real-time code-coverage indicators and error reporting inside your editor. It's available as an extension for VS Code, IntelliJ editors (WebStorm, IntelliJ IDEA), Atom, Sublime Text, and Visual Studio.
Wallaby.js continuously executes your tests in the background. It identifies which test file corresponds to the code you're editing and runs that test suite, letting you know immediately if your latest changes pass or break something.
Setting Up Wallaby.js in VS Code
Start by installing the Wallaby.js VS Code extension from the marketplace. After installation, the core runtime downloads and installs automatically.
Licensing
Wallaby.js offers free licenses for open-source projects through its Open Source program. You can also get a fully functional 15-day trial license. For any other use, you'll need to purchase a license from the Wallaby.js website.
Activating Your License
Once you have a license key:
- Open the command palette in VS Code.
- Search for
Wallaby.js: Manage License Key. - Enter your key and confirm.
You'll see a notification that Wallaby.js has been successfully activated.
Working with a React App
Let's see Wallaby.js in action with a React project. For this walkthrough, you can clone the related demo repo or create a React app from scratch using the create-react-app CLI tool.
With your React project open in VS Code, start Wallaby.js by running Wallaby.js: Start from the command palette, or use the keyboard shortcut Ctrl + Shift + R R twice.
Wallaby.js displays its coverage indicators in the left gutter of your editor. When it starts on a fresh create-react-app project, it automatically detects src/App.js and its associated test file src/App.test.js, runs those tests, and reports results in your editor and in the status bar.
Understanding the Color Indicators
Wallaby.js uses a consistent color scheme for quick scanning:
- Gray: This line is not executed by any test.
- Yellow: Some code on this line is executed, but other parts are not.
- Green: All code on this line is covered by tests.
- Pink: This line is on the execution path of a failing test.
- Red: This line contains an error or a failed expectation.
Debugging with Wallaby.js
When a test fails, the indicators switch to red and pink. The error message displays inline in the editor next to the problematic line, thanks to Wallaby.js's advanced logging.
From the Wallaby.js output window (accessible via the status bar), you'll find a Debug Test link next to each failing test. Clicking it while holding Ctrl opens the Wallaby.js time travel debugger in a side panel. You can inspect runtime values by selecting any variable or expression in your editor, and Wallaby.js displays the value. This allows you to see exactly why a test is failing—for example, you might discover a function decrements a counter by 2 instead of 1.
The Test Story Viewer
Another powerful feature is the Open Test Story link in the output window. Clicking it opens the test story viewer, which shows you a single view of what code each test actually executes. This is an efficient way to map the relationship between your tests and your functions in one logical view.
Visualizing Tests in the Wallaby.js App
The Wallaby.js output window also includes a Launch Coverage & Test Explorer link. Clicking it opens the standalone Wallaby.js app in your browser at https://localhost:51245/. The app loads your current project and provides:
- A top-level summary of your test metrics.
- A Tests tab listing individual test outcomes.
- A Files tab showing coverage reports by code file.
Clicking on any test in the app reveals detailed error reporting on the right side of the interface.
Adding a Feature and Writing Tests
Once you have the basics down, it's time to build and test a new feature. In this case, we'll add an upvote/downvote UI with a counter that increments or decrements based on button clicks.
Build out the UI with the appropriate state management in src/App.js and add styling to src/index.css. After implementation, you'll immediately notice gray indicators showing untested code paths.
Now, write your tests in src/App.test.js using React Testing Library, which comes pre-configured with create-react-app. Your test cases will cover:
- The app renders correctly.
- The initial vote count is
0. - Clicking the upvote button increments the count.
- Clicking the downvote button decrements the count.
Import the necessary functions from @testing-library/react alongside what's already there, then define the tests.
When a test fails, the inline indicators in both src/App.js and src/App.test.js change instantly. Use the time travel debugger or test story links to step into the failing function and identify the bug. For the downvote test, you'll find a logic error that's easily fixed.
After correcting the logic, Wallaby.js indicators switch to green across the board. Your coverage metrics increase because the previously untested paths are now executed. This immediate feedback loop—write, fail, diagnose, fix, green—is the core of Wallaby.js's approach to testing, making it well-suited to a test-driven development practice.
What Wallaby.js Brings to the Table
Wallaby.js is a test runner designed to remove friction from the feedback loop. Instead of manually triggering test runs and waiting for terminal output, the tool continuously executes affected tests as you type, annotating results directly in your editor. For React developers especially, this means instant insight into whether a change broke a component, a hook, or a utility function — without switching context.
The core value lies in the real-time data it surfaces. You see pass/fail states in the gutter next to your code, coverage highlights in the source, and performance timings per test. This turns testing from a batch operation into an ongoing conversation with your codebase. The integration is not magic, though; it requires a small setup step to point Wallaby.js at your React project and test configuration.
Running Tests Alongside Your Code
Once configured in VS Code, the Wallaby.js panel opens a running test output that updates on every keystroke. Rather than saving a file and waiting for a separate terminal command, the test suite executes and results appear immediately. The tool also supports debugging — you can set breakpoints in your source or test files, and Wallaby will pause execution there, respecting your existing source maps.
For React testing, this works especially well with component render checks. If a prop change causes a visual regression or a hook throws an error, the failure is reported inline at the exact assertion that failed. You can then inspect the component tree, check state, and iterate without ever leaving the editing window.
Coverage and Performance Metrics
Wallaby.js also provides live code coverage analysis. Uncovered lines are visually marked in your source files, so you can see which parts of a React component or custom hook lack test assertions. This continuous coverage feedback helps you write tests for the right pieces of logic instead of guessing at what’s already protected.
Avoiding redundant test runs is another benefit. The tool tracks file dependencies and only re-runs tests that are affected by a change. In a large React project where many components import shared utilities, this can cut minutes off your workflow every hour.
Getting the Most Out of the Setup
To get Wallaby.js running, you need a valid license (trial available), and you install the extension from the VS Code marketplace. The configuration process is typically handled via a wallaby.js config file at your project root — often reusing your existing Babel or TypeScript configuration to keep parity with your test environment. Once started, the panel shows all tests in a tree, with passing ones in green and failures in red.
If you are using create-react-app, there are specific config snippets in the official docs to handle the strict transpilation requirements. The startup process is straightforward, but your project must be free from syntax errors — a parse failure earlier in a file can suppress results for tests lower down.
When you find a flaky or slow test, Wallaby's per-test timing lets you isolate it. The inline reporting shows you whether a test took milliseconds or seconds, which is helpful for React components that render a large tree or rely on async state updates.
Practical Caveats
It is worth noting that Wallaby.js is a commercial product; the editor integrations and continuous test runner do not come for free. Also, the tool expects a certain level of project structure maturity — heavily custom webpack setups may require extra configuration to resolve module aliases, and projects with many integration tests (as opposed to unit tests) will see less benefit from the incremental approach since those typically need a browser environment or a live backend.
Finally, the live coverage and error reporting are only as good as your test assertions. If you render React components without making behavioral checks, Wallaby will show green quickly but not guarantee your app is correct. Use it as a companion to — not a substitute for — proper test quality.
Resources
For a step-by-step walkthrough, the official VS Code tutorial provides the fastest route to a working setup. The demo project used for this article is hosted on GitHub, showing the practical configuration used to test a React app live.
You can also explore adjacent topics that matter to React engineers: handling sticky headers with full-height elements, generating unique numbers in JavaScript using Sets, an introduction to full-stack composability, and a refreshed take on the test pyramid.
