vscode-jest

Getting Started

This extension supports full jest features in vscode environment to make testing more intuitive and fun. It should work out-of-the-box for most common jest projects. To get started:

1. Setup jest in your project if you haven't.
2. install "Jest" extension in vscode.
3. reload or restart vscode

If the extension can find the jest command, by default it will automatically run and monitor all tests in watch mode upon launch, and you should see tests, status, errors, coverage (if enabled) in TestExplorer and editors like this:

If you have a more sophisticated project configuration or prefer to run tests differently, fear not, the extension supports extensive customization settings. For example:

• you can use jest.jestCommandLine to tell the extension to use yarn test instead of the default jest command.
• you can use jest.runMode to optimize performance and control when the extension should run your tests.
• you can use the extension with monorepo projects, see monorepo project support for details.

You can see the full features and learn more details in the How-To section. If you encounter an unexpected error, feel free to checkout the Troubleshooting or file an issue.

Happy testing!

Releases

• Current (v6.4.4): release note
• Previous (v6.4.0): release note

All: Release Notes

Content - vscode-jest - Getting Started - Releases - Features - Installation - User Interface - How To? - How to set up the extension? - How to change runMode for the current session? - How to trigger a test run? - How to debug tests? - How to use code coverage? - How to read coverage scheme and customize it - How to update and view snapshots - How to use the extension with monorepo projects? - How to read the StatusBar? - How to perform Quick-Fix? - How to see more debug info (self-diagnosis)? - Customization - Settings - jestCommandLine - rootPath - coverageFormatter - coverageColors - outputConfig - runMode - autoRun - testExplorer - shell - monitorLongRun - autoRevealOutput - parserPluginOptions - virtualFolders - Debug Config - Debug Config v2 - Commands - Menu - Troubleshooting - Jest failed to run - Performance issue? - Intermittent errors for (npm/yarn/node) command not found during test run or debugging - I don't see "Jest" in the bottom status bar - What to do with "Long Running Tests Warning" - The tests and status do not match or some tests showing question marks unexpectedly? - Want to Contribute? - License

Features

• Starts Jest automatically for most projects with runnable jest configurations.
• Supports monorepo, react, react-native, angular, vue and various configurations/platforms.
• Supports running multiple jest processes within the same workspace folder.
• Fully integrated with the vscode TestExplorer.
• Help debug jest tests in vscode.
• View and update snapshots interactively.
• Show coverage information in files being tested.
• Supports both automatic and manual test runs at any level, and easy-switch via UI.
• Supports additional IntelliSense for jest methods.
• Show fails inline of the expect function, as well as in the problem inspector.
• active community support.

Installation

Simply open Visual Studio Code, go to the extension view and search for "Jest". Alternatively, open Jest - Visual Studio Marketplace and click "Install".

For detailed releases and migration help, please see releases.

User Interface

This extension fully integrates with the VSCode testing framework, supporting both automatic and on-demand test runs. In addition to the standard VSCode Test Explorer interface, the extension provides additional UI elements to simplify the development workflow:

1. Dynamic Run Mode: Run mode dictates the overall user experience, determining when tests should run, with or without coverage, error display style, etc. Different run modes may have different performance implications, particularly for larger projects.

We realized that runMode preference could change even within a given project, for example developers prefer "watch" runMode when doing light code changes to ensure nothing breaks, may prefer the 'on-demand' mode during heavy test development for greater control over test execution. A static runMode config in "settings.json" is simply not sufficient. Therefore, we added the runMode quick switch so users can easily switch to different runMode without permanently modifying the "settings.json".

1. Interactive Test Run: Besides automatic test executions ("watch", "on-save"), users can initiate full test actions, such as run, debug, update/view snapshot, from both editor and Test Explorer through various UI components.

2. Test Output: The extension offers native jest run outputs in both the "TERMINAL" and "TEST RESULTS" panel. "TEST RESULTS" panel mainly displays test run output in execution order, while "TERMINAL" groups test output by workspace folder/virtual-folder, and also includes extension configuration details, quick-fix suggestions, etc. By default, the output appears when tests run, but this can be adjusted via the outputConfig setting.

3. Extension Status: Upon successful launch of the extension, the status bar shows the run status for the active folder, and the aggregated test status for the whole workspace. Clicking on each status reveals the associated output window.

How To?

How to set up the extension?

Hopefully, you don't have to do anything. If you can run jest from the terminal, you should be able to use this extension.

The extension will try to auto-config a jest command and debug config when needed. If the auto-config fails, or any non-test error occurred, users should see an quick-fix-chooser link in the output terminal to help resolving the issues.

For more details see the setup tool and the complete customization options in settings.

How to change runMode for the current session?

To adjust the runMode during your current session:

1. Click on the runMode buttons referenced in the User Interface section. This action will prompt a runMode chooser.

2. Within the chooser, you can swiftly switch the runMode type, toggle coverage, opt for deferred mode, or directly edit the runMode within an editor.

1. Confirm your adjustments by clicking the "Apply" button located on the top right. Or discard changes with the "Return" button on the top left.

Note: Changes to runMode using the UI will apply only to the ongoing session. Upon restarting the extension or reloading the window, the runMode will revert to the value in settings.json. However, you can write the current runMode value to settings.json with command: "Jest: Save Current RunMode" via command palette.

For an in-depth understanding of each type and the available options, refer to runMode.

How to trigger a test run?

By default, the extension uses jest watch mode that automatically runs tests upon related file changes. In addition, users can also trigger individual tests/suites on-demand:

1. trigger test runs via the gutter menu of each test and describe blocks.
2. trigger test runs via the TestExplorer tree item's inline menu.
3. trigger test runs via command palette, such as Jest: Run All Tests
4. trigger test runs via the editor context menu: Jest: Run Related Tests

The extension will try to auto-config a jest runner, if it fails, you can try the quick-fix-chooser.

How to debug tests?

There are 2 ways to debug a specific test:

1. via the editor gutter context menu
2. via the test tree item inline menu

The extension will try to generate a debug config, but if you encounter a debug error or want to change the configuration, please see Customization - Debug Config.

How to use code coverage?

v6.3.0 and up

Test coverage can also be run interactively via the TestExplorer tree view, by clicking the "Run with Coverage" button.

v6.2.5 and below

[!Note] Note: The following describes the original test coverage feature, which remains available as of 2024/08/13. With the introduction of the new, more intuitive integration in v6.3.0, we plan to deprecate this feature soon. If you have any concerns or would like to share your thoughts on this change, please let us know.

Code coverage can be triggered via 1. change runMode config via chooser or settings. 2. Command Palette, select command like Jest: Toggle Coverage to activate or deactivate code coverage (see full list in commands.

The coverage stats will be displayed at the source code editor: summary at the top and inline coverage indicator based on the formatter selected.

To verify the coverage mode is on, one can check the runMode chooser or the status bar (see how to read the status bar)

Note: this extension supports both babel and v8 coverageProviders. However, please note the coverage might not be exactly the same, see facebook/jest#11188 for more details.

How to read coverage scheme and customize it

In addition to the coverage summary that is shown on the top of the file, each line will be marked by its coverage status according to the coverage formatter configured. There are 3 types of coverage you might see in your source code, distinguished by colors:

• "covered": if the code is covered. Either not marked or "green" by default, depends on the formatter.
• "not-covered": if the code is not covered. Marked as "red" by default.
• "partially-covered": Usually this mean the branch (such as if, switch statements) only partially tested. Marked as "yellow" by default.
• Please note, istanbuljs (the library jest used to generate coverage info) reports switch branch coverage with the first "case" statement instead of the "switch" statement.

You can customize coverage start up behavior, style and colors, see customization for more details.

How to update and view snapshots

Users can update snapshots in any granularity from the context menu: 1. in the TestExplorer tree view: Update snapshot for the workspace, folder, test file, or just a single test. 2. in the Editor's gutter menu: Update and view the snapshot for a test block.

Snapshots are now fully supported for parameteriz