Supercharge Testing React Applications With Wallaby.js
Note: In order to be able to follow along, you’ll need to be familiar with JavaScript testing and have a working knowledge of building React applications.
This article has been kindly supported by our dear friends at Wallaby who create awesome developer tools that push the boundaries of what is technically possible and in doing so make software developers more efficient, more effective, and happier. Thank you!
One thing you will discover very quickly when you start writing tests for an application is that you want to run your tests constantly when you are coding. Having to switch between your code editor and terminal window (or in the case of VS Code, the integrated terminal) adds an overhead and reduces your productivity as you build your application. In an ideal world, you would have instant feedback on your tests right in your editor as you are writing your code. Enter Wallaby.js.
What Is Wallaby.js?
Wallaby.js is an intelligent test runner for JavaScript that continuously runs your tests. It reports code coverage and other results directly to your code editor immediately as you change your code (even without saving the file). The tool is available as an editor extension for VS Code, IntelliJ Editors (such as WebStorm and IntelliJ IDEA), Atom, Sublime Text, and Visual Studio.
Let’s see how we can get the benefits of Wallaby.js using VS Code.
Note: If you are not using VS Code you can check out here for instructions on how to set up for other editors.
Install The Wallaby.js VS Code Extension
To get started we will install the Wallaby.js VS Code extension.
After the extension is installed, the Wallaby.js core runtime will be automatically downloaded and installed.
Wallaby License
Wall
After
Now
Note:).
When Wallaby.js starts you should see its test coverage indicators to the left of your editor similar to the screenshot below:
Wallaby.js provides 5 different colored indicators in the left margin of your code editor:
- Gray: means that the line of code is not executed by any of your tests.
- Yellow: means that some of the code on a given line was executed but other parts were not.
- Green: means that all of the code on a line was executed by your tests.
- Pink: means that the line of code is on the execution path of a failing test.
- Red: means that the line of code is the source of an error or failed expectation, or in the stack of an error.
If you look at the status bar you will see Wallaby.js metrics for this file and it’s showing we have a 100% test coverage for
src/App.js and a single passing test with no failing test. How does Wallaby.js know this? When we started Wallaby.js, it detected
src/App.js has a test file
src/App.test.js, it then runs those tests in the background for us and conveniently gives us the feedbacks using its color indicators and also giving us a summary metric on our tests in the status bar.
When you also open
src/App.test.js you will see similar feedback from Wallaby.js
:
You will see the indicators change to red and pink for the failing tests. Also notice we didn’t have to save the file for Wallaby.js to detect we made a change.
You will also notice the line in your editor in
src/App.test.js that outputs the error of the test. This is done thanks to Wallaby.js advanced logging. Using Wallaby.js advanced logging, you can also report and explore runtime values beside your code using
console.log, a special comment format
//? and the VS Code command,
Wallaby.js: Show Value.
Now let’s see the Wallaby.js workflow for fixing failing tests. Click on the Wallaby.js test indicator in the status bar to open the Wallaby.js output window. (“✗ 1 ✓ 0”)
In the Wallaby.js output window, right next to the failing test, you should see a “Debug Test” link. Pressing Ctrl and clicking on that link will fire up the Wallaby.js time travel debugger. When we do that, the Wallaby.js Tools window will open to the side of your editor, and you should see the Wallaby.js debugger section as well as the Value explorer and Test file coverage sections.
If you want to see the runtime value of a variable or expression, select the value in your editor and Wallaby.js will display it for you.
Also, notice the “Open Test Story” link in the output window. Wallby.js test story allows you to see all your tests and the code they are testing in a single view in your editor.
Let’s see this in action. Press Ctrl and click on the link — you should be able to see the Wallaby.js test story open up in your editor. Wallaby’s Test Story Viewer provides a unique and efficient way of inspecting what code your test is executing in a single logical view.
Another thing we will explore before fixing our failing test is the Wallaby.js app. Notice the link in the Wallaby.js output window: “Launch Coverage & Test Explorer”. Clicking on the link will launch the Wallaby.js app which will give you a compact birds-eye view of all tests in your project.
Next, click on the link and start up the Wallaby.js app in your default browser via. Wallaby.js will quickly detect that we have our demo project open in our editor which will then automatically load it into the app.
Here is how the app should now look like:
You should be able to see the test’s metrics on the top part of the Wallaby.js app. By default, the Tests tab in the app is opened up. By clicking on the Files tab, you should be able to see the files in your project as well as their test coverage reports.
Back on to the Tests tab, click on the test and you should see the Wallaby.js error reporting feature to the right:
.
Implementing Our Feature
We.
These visual clues by Wallaby.js are convenient for test-driven development (TDD) since we get instant feedback on the state of our application regarding tests.
Testing Our App Code
Let.
:
Our
src/App.test.js should look like this:
import React from 'react'; import { render, fireEvent, cleanup } from '@testing-library/react'; import App from './App'; test('App renders correctly', () => { render(<App />); }); it('Vote count starts at 0', () => { const { getByTitle } = render(<App />); const voteElement = getByTitle('vote count'); expect(voteElement).toHaveTextContent(/^0$/); }); it('Vote count$/); }); it('Vote count$/); }); afterEach(cleanup);
After writing these tests, Wallaby.js shows us that the missing code paths that we initially identified before writing any tests have now been executed. We can also see that our coverage has increased. Again, you will notice how writing your tests with instant feedback from Wallaby.js allows you to see what’s going on with your tests right in your browser, which in turn improves your productivity.
Conclusion
From this article, you have seen how Wallaby.js improves your developer experience when testing JavaScript applications. We have investigated some key features of Wallaby.js, set it up in VS Code, and then tested a React application with Wallaby.js.
Further Resources
- VS Code Tutorial, Wallaby.js
- The demo app for this project can be found on GitHub.
