What is Wallaby.js for VSCode?
Wallaby will run your Jest test in VS Code93% quicker, provide a debugging experience for your tests that works 1.9x faster, and provide 76% more useful real-time test results.
You can see test execution results and code coverage in real-time in your code editor right next to the editing line. You can say goodbye to context switching.
This tool runs extremely fast as it calculates and runs only the most important tests affected by code changes. Often, you only need to run one test. This level of performance is unmatched by any other testing tool.
Wallaby.js is not tied to any vendor, API, or framework. It is a plugin that you can use with your existing testing/UI framework/IDE. If you have to, your tests will still be possible to run without Wallaby.js.
Wallaby.js for VSCode Great Features:
Tests run immediately as you type, on unsaved changes, in parallel if required; no need to do anything manually. Wallaby knows how your code and tests relate, so after a change, only the minimum set of tests need to be re-run; no other tool is capable of operating like this. No matter how large your project grows, feedback is almost instant.
Time Travel Debugging
Move forward and backward through your code to understand the conditions that led to a specific bug. Wallaby's Time Travel Debugger accelerates your edit, compile and debug loop by allowing you to jump to a specific line of code, view runtime values, edit and continue and step into, over, and out of your code.
Inspect the code that your test is executing in a single logical view. Wallaby's Test Story Viewer allows you to see your test execution trace without having to jump between multiple functions or code files. It is ideal for both reading and debugging code. Quickly see covered lines of code, step into, over, and out of your code, and view runtime values.
Inline Runtime Values
See the results of console.log and runtime variables in your editor, right next to your code. Show and copy expression values with editor commands, accessible using keyboard shortcuts. Wallaby's special comment format can also be used to evaluate expressions and includes the ability to measure code execution times.
Inline Error Reporting
Error messages are displayed right next to the code that caused them. Gutter indicators show if the current line of code is the source of an error or on the execution path of a failing test or error. Editor commands (with keyboard shortcuts) allow you to navigate the associated failing test or error source quickly.
Inline Code Coverage
Indicators in the gutter of your code editor are constantly updated in real-time to display test coverage so you can quickly see which lines of code are fully covered, only partially covered, or not covered at all. Editor commands can be used to toggle uncovered regions to see exactly which parts of your code have not been executed.
Test and Coverage Explorer
A strategic-level view of your project's tests and code coverage is available through Wallaby's locally hosted web application. Open files in your editor from your browser as you explore your tests and code coverage. Sort and filter by name, duration, passing/failing tests, and code coverage. You can also exclude code from coverage calculations.
Wallaby's Test Profiler allows you to quickly record a test's CPU usage profile to analyze its runtime performance. In addition to your own test and code files, your external dependencies code is also profiled. You can quickly navigate to a section of code you want to review by clicking on the hotspot in the profile viewer.
Wallaby's Output Inspector provides an ergonomic and convenient way of inspecting logged values and errors details in a rich editor-friendly manner. Information is displayed in a code editor window, providing rich keyboard support and allowing you to stay in your coding mindset to avoid losing your flow.
Runtime Value Explorer
Wallaby's Value Explorer allows non-primitive runtime values to be viewed and explored in an easy-to-navigate real-time treeview. This feature is great for exploring larger objects and makes debugging with Wallaby easier and faster. The tree can be expanded to any depth, and paths/values can be copied directly to the clipboard.
Interactive Tests Output
Test execution results are ergonomically displayed in your editor's output window. All currently failing tests are listed, along with errors, diffs/snapshots, error stacks, and any console.log calls. The output window's hyperlinks allow you to navigate directly to files in your editor, such as the exact error line or a broken test.
Enhanced Diffs & Snapshots
Wallaby displays compact diffs in editor hover tips and Wallaby's output window. The command allows you to see the diff in a side-by-side view. Jest snapshot test support includes editor commands to update snapshots for your current test, current file, or your entire project.