Wallaby.js video course
First you need to install wallaby.js extension for Visual Studio, if you haven’t done it yet.
For this tutorial I will use this sample from our public GitHub repository. You can clone it to try locally:
git clone https://github.com/wallabyjs/public
Once you have the source code locally, open the
If you are using Jest >= v24, you can try our new feature that allows to use Wallaby without any configuration.
If you have your tests and source code in different projects, then the recommended approach is to make your wallaby.js configuration file one of your Solution Items.
wallaby-jasmine-2.js configuration file in the Solution Explorer and select Start Wallaby.js from the context menu. Wallaby will start with selected configuration file.
To stop wallaby.js, you may use the Stop Wallaby.js context menu item.
The very first time wallaby.js starts, it may take a minute or two to install its dependencies. After this initial start, dependencies are updated in the background automatically when required.
Now let’s have some fun.
Once you have started wallaby.js, in the bottom right-hand corner of the screen you’ll see the wallaby status indicator. Its job is pretty simple: when it displays a spinner, your tests are running; when red, you have some failing tests; when green, all of your tests are passing.
Let’s open the sample calculator Jasmine spec.
When wallaby.js is running, you can see the code coverage in the source files that it tracks (specified in the configuration file). As you can see, there are various colored squares displayed for each line of your source code.
Jump to any of the passing tests and break it, for example try changing the 2 plus 2 expectation result to 5 in the
should add numbers test. Right after the change wallaby.js automatically runs your tests and displays the result in Visual Studio, right where you need to see it.
Also, try editing some
console.log arguments or just
console.log any object you like.
The code coverage and inline messages are automatically updated, right as you type.
We also recommend reading about some more powerful ways to log things and measure code performance with wallaby.js.
Here is what coverage indicators mean:
- Gray square means that the source line is not covered by any of your tests.
- Green square means that the source line is covered by at least one of your tests.
- Yellow square means that the source line is only partially covered by some of your tests.
- Red square means that the source line is the source of an error or failed expectation, or is in the stack of an error.
- Pink square means that the source line is on the execution path of a failing test.
You may also inspect wallaby.js output in the Output tool window. In the tool window you may view output from the Failing Tests tab and Console.
The Failing Tests output source displays all tests that are currently failing along with the error stacks and registered console.log calls. Some bits of the displayed information are hyperlinks that you can use with your mouse (Ctrl + mouse click) or keyboard (F12) to navigate to different places, for example to the exact error line, or a failing test, or a place where something is logged to console.
The Console output source displays some additional information about test execution progress. The tab can also be useful for troubleshooting wallaby.js issues.
Sometimes when writing or debugging a test (or a set of tests, or a test file) for a particular feature, you may need to see code coverage and output only for this specific test (or the set of tests, or the test file). To allow it, wallaby fully supports testing frameworks test focusing functions, as well as special comments to focus/skip specific test files.
To help you write your code and tests more efficiently, wallaby.js provides a number of quick actions, which are available by clicking the light bulb gutter icon or pressing Ctrl + .. Quick actions only display when they are relevant, based on your line context.
The actions include:
- Show line test: displays the line-related test data. This is the most frequently used action that allows you to quickly view and navigate to test/code errors and console messages. The
Show line testwindow can be closed by pressing
- Show value: quickly display an expression value without modifying your code.
- Jump to failing test: quickly navigate to the failing test from the failing test execution path.
- Jump to error source: quickly navigate to the source of the test error from the failing test execution path.
- Show line uncovered regions: this action is useful for lines with the “yellow” marker to display what exactly is not covered in the line. By default, uncovered expressions will be highlighted in orange.
- Show file uncovered regions: similar to the previous action, this displays uncovered regions for the whole file. The orange highlights for both actions can be removed by pressing Esc (or you can just start changing the file code and they will disappear).
- Show assertion data diff: displays the difference between the actual and expected data of the failed assertion (normally an equality one).
- Run line tests: the action is pretty simple (yet so wanted by so many) – it just runs a single test (if invoked from within the test) or all related tests (if invoked within some source code covered by the tests).
- Run file tests: the action runs all tests within the test file it is invoked in, or all tests in all the test files that cover the source file that the action is invoked within.
- Run project tests: the action runs all tests in your project.
- Update project snapshots: the action updates all Jest snapshots in your project.
- Update file snapshots: the action updates all Jest snapshots in the current (focused) file, or all snapshots in all the test files that cover the source file that the action is invoked within.
- Update test snapshots: the action updates snapshots of a single test (if invoked from within the test) or all snapshots in all related tests (if invoked within some source code covered by the tests).
All of the described actions can also be mapped to any keyboard shortcuts you prefer for extra productivity. You can do so in Tools - Options - Environment - Keyboard (search for wallaby in the keymap settings).
If you have ReSharper installed, you need to check that the
Do not show Visual Studio Light Bulb setting is disabled to be able to use wallaby.js quick actions:
Merge Visual Studio Light Bulb actions into ReSharper bulb setting is enabled then wallaby.js quick actions will be also available when you use Alt + Enter.
Fonts and colors
If some wallaby.js default colors don’t fit your theme, they are very easy to adjust.
Note that trial version of wallaby.js (the one without a valid license) will be displaying prompts and stopping after some time, so you will need to restart the tool or your editor. Please contact us if you would like to arrange a trial period for yourself or your team without activation prompts and restarts.