Test menu is now accessible for all tests, regardless of run mode. If cursor jumping when editing tests is a bit annoying, you can now alternatively disable the DebugCodeLens and use "Debug Test" from the test menu:
For users struggled with the jest process environment, this release added 2 new settings to
More details see v4.2 release.
v4.1 with Test Explorer
Test explorer is one of the highly requested feature for this extension. Last year vscode announced the plan for the official test explorer and we have been trying out the new proposed API since. Now the vscode test explorer is live (2021 July release - v1.59), we are excited to release
Please note, the test explorer is new and some of the features might be missing or imperfect (see How to use test explorer for more details), nevertheless, we will continue to improve it. Please do not hesitate to ask questions or file issues, thanks and have fun!
After longer than expected development, v4 is finally released! 😄
This is a big release packed with changes to address many nagging issues you have been asking for, such as inconsistent test status indicators, high CPU usage, more granular control of the test runner, missing coverage, supporting parameterized tests, mysterious start up failure etc.
Knowing the scope of the changes is significant, while we tried to test it as much as we can, there are probably still some rough edges we have not discovered. If it interrupted your work, our apology! You can either look up on the document below to see if you can find a workaround; or revert to the earlier version. Please do not hesitate to file issues or ask questions in discussions, we will be monitoring them closely and address issues as best we can.
P.S. We find the new version did made the development of this extension a bit easier (yes, we do eat our own dog food :dog:), hopefully, it will do the same for your project. Happy coding!
A comprehensive experience when using Facebook's Jest within a project.
Simply open Jest - Visual Studio Marketplace and click "Install". Alternatively open Visual Studio Code, go to the extension view and search for "Jest".
For detailed releases and migration help, please see releases.
How to use the extension?
This extension should work out of the box for common jest environments. Users should see test status indicators in test file editors and Jest stats in the StatusBar, for example. However, for more sophisticated projects or people who prefer different look-and-feel/behaviors, customization via settings might be needed.
Most features in this extension should be pretty straight forward without much configuration. But in case you want to change the default behavior or encountered some difficulty with the extension, please checkout the following how-to and troubleshooting guides.
This extension can automatically start the jest process without any custom configuration when
How to get it set up?
This extension runs on top of your Jest installation. Upon starting, it has the expectation that the Jest environment is properly set up, i.e. jest can be executed in VS Code's terminal.
Out of the box, this extension should work for most simple/standard jest and react projects (see common jest environments). However, if you have a more sophisticated project or custom jest command, the extension might not be able to start the jest process automatically. In such case you can use the jest.jestCommandLine to customize the extension. In v4 and on, a setup wizard can be used to configure the essential settings for the extension.
Feel free to checkout the complete list of available custom settings.
How to trigger the test run?
By default, users need not do anything, the extension will automatically trigger related test run when needed by running jest in the watch mode. However, this can be easily changed if more granular control is desired. Below shows the execution models supported and how to use jest.autoRun to opt into it:
No need to manually trigger any test run, all changes will be monitored and related tests will be run accordingly. It is basically running jest with
Allow users to control test run completely either through commands/menu manually or use vscode's onSave event to automate related test runs:
Note: other than the "off" mode, users can specify the "onStartup" option for any "jest.autoRun" config, for example:
How to debug tests?
A test can be debugged via the debug codeLens appeared above the debuggable tests. Simply clicking on the codeLens will launch vscode debugger for the specific test. The extension also supports parameterized tests and allows users to pick the specific parameter set to debug.
The simplest use cases should be supported out-of-the-box. If VS Code displays errors about the attribute
For parameterized tests, you might see debug codeLens like
By default debug codeLens will appear for failed and unknown tests, to change that and others, please see customization for more details.
How to use code coverage?
Code coverage can be triggered via Command Palette, select command like Jest: Toggle Coverage to activate or deactivate code coverage (see full list in commands. The coverage state is also shown in the StatusBar:
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:
You can customize coverage start up behavior, style and colors, see customization for more details.
⚠️ In rare cases, coverage info might be less than what it actual is in "watch" mode (with
How to use the extension with monorepo projects?
The recommended approach is to setup the monorepo project as a multi-root workspaces in vscode, which each sub package is a "folder". While you can use jest
You can customize how the extension works in multi-root workspaces, see customization for more details.
How to read the StatusBar?
StatusBar shows 2 kinds of information:
Illustrationshows the active workspace has coverage on.
shows the active workspace has onSave for test file only, and that the workspace stats is out of sync with the code, such as when the source file is changed but the related tests are not run yet.
shows the autoRun will be triggered by either test or source file changes.
How to use the Test Explorer?
However, test explorer is new and some features are still work-in-progress or not available yet:
Users can use the following settings to tailor the extension for their environments.
This should be the command users used to kick off the jest tests in the terminal. However, since the extension will append additional options at run time, please make sure the command line can pass along these options, which usually just means if you uses npm, add an additional "--" at the end (e.g.
If your project doesn't live in the root of your repository, you may want to customize the
Possible status are:
There are 2 formatters to choose from:
(Note, there is an known issue in vscode (microsoft/vscode#5923) that gutter decorators could interfere with debug breakpoints visibility. Therefore, you probably want to disable coverage before debugging or switch to DefaultFormatter)
Besides the formatter, user can also customize the color via
the default color scheme below, note the opacity might differ per formatter:
4.1 default is
This extension looks for
If the default config is not working for your project, you can either use the setup wizard, probably the easier approach (available in v4), or edit the
If you choose to edit the
There are many information online about how to setup vscode debug config for specific environments/frameworks, you might find the following helpful:
This extension contributes the following commands and can be accessed via Command Palette: |command|description|availability| |---|---|---| |Jest: Start All Runners| start or restart all jest runners|always |Jest: Stop All Runners| stop all jest runners |always |Jest: Toggle Coverage| toggle coverage mode for all runners|always |Jest: Start Runner (Select Workspace)| start or restart the jest runner for the selected workspace|multi-root workspace |Jest: Stop Runner (Select Workspace)| stop jest runner for the selected workspace |multi-root workspace |Jest: Toggle Coverage (Select Workspace)| toggle coverage mode for the selected workspace|multi-root workspace |Jest: Run All Tests| run all tests for all the workspaces|interactive mode |Jest: Run All Tests (Select Workspace)| run all tests for the selected workspace|interactive mode and multi-root workspace |Jest: Run All Tests in Current Workspace| run all tests for the current workspace based on the active editor| interactive |Jest: Toggle Coverage for Current Workspace| toggle coverage mode for the current workspace based on the active editor| interactive |Jest: Setup Extension| start the setup wizard|always|
One can assign keyboard shortcut to any of these commands, see vscode Key Bindings
In interactive mode, user can trigger the following action from the text editor context-menu |menu|description|keyboard shortcut |---|---|---| |Jest: Run Related Tests| if in test file, run all tests in the file; if in source file, run all tests with dependency to the file|Ctrl-Option-t (Mac) or Ctrl-Alt-t|
Please see vscode Key Bindings if you want to change the keyboard shortcut.
Sorry you are having trouble with the extension. If your issue did not get resolved after checking out the how-to section and the tips below (click arrows to expand), feel free to ask the community, chances are some one else had a similar experience and could help resolving it.
I don't see "Jest" in the bottom status barThis means the extension is not activated. The extension should be automatically activated as described in [How to start jest](#how-to-start-jest). If it failed because maybe you don't use the root of your project for jest tests, you can use [jest.rootPath](#rootPath) to point to that directory instead.
I got "Jest Process xxx failed unexpectedly..." or "Jest failed too many times..." error message
This usually means the extension is not able to start jest process for you. First check the TestExplorer Output, Jest OUTPUT channel or developer console to see what is the actual error (see self-diagnosis).
If it is related to the run time environment, such as
Most likely the child_process environment is not correctly initialized. There are many possible causes, sometimes restarting vscode will fix it, otherwise feel free to check out a more in-depth explanation/suggestion here.
If you see error about not able to find
There could be other causes, such as jest test root path is different from the project's, which can be fixed by setting jest.rootPath. Feel free to check out the customization section to manually adjust the extension if needed.
It seems to make my vscode sluggish
By default the extension will run all tests when it is launched followed by a jest watch process. If you have many resource extensive tests or source files that can trigger many tests when changed, this could be the reason. Check out jest.autoRun to see how you can change and control when and what tests should be run.
The tests and status do not match or some tests showing question marks unexpectedly
If your test file happen to have parameterized tests, i.e.
If the above did not resolve your issue, please see the self-diagnosis below that could show more insight of why the test and result could not be matched.
If your can execute jest tests on command line but vscode-jest was not running as expected, here is what you can do to find out more information:
Hopefully most issues would be pretty obvious after seeing these extra output, and you can probably fix most yourself by customizing the
Want to Contribute?
Thanks for considering! Check here for useful tips and guidelines.
vscode-jest is MIT licensed.