Wallaby with VS Code

Real-time testing with Wallaby

Imagine a world where there are no boundaries between your code and your tests. Instead of saving changes to your code and seeing the output from Jest in a separate panel, you would see the results of your tests instantly as you type. Code with passing tests would be marked with a reassuring green. Code with failing tests would be highlighted in red, with a description of the failure floating next to it. Wallaby is the wonderful tool that allows this to happen.

In addition to working like magic, Wallaby is a commercial product. JavaScript developers have been blessed (spoiled, some would say) by an abundance of free tools. All of the other amazing software mentioned in this chapter (VS Code, Jest, ESLint, Prettier) are free and open source. But there is, quite simply, nothing else like Wallaby. There’s a 30-day free trial, so don’t let the price tag deter you from following along with this chapter.

Open up the Extensions sidebar, search for “Wallaby.js,” and install. A notification will pop up in the corner:

Installing wallaby.js dependencies. It may take a minute or two. You will be notified once the install is finished.

While that’s happening, we can configure Wallaby for our project. Create a file called wallaby.js at the root of the project: