A comprehensive experience when using Facebook's Jest within a project.
- Useful IDE based Feedback
- Session based test watching
- Starts Jest automatically when you're in a root folder project with Jest installed.
- Show individual fail / passes inline.
- Show fails inside the problem inspector.
- Highlights the errors next to the
expect
functions. - Adds syntax highlighting to snapshot files.
- A one button update for failed snapshots.
Open up VS Code, go search for the extension "Jest".
This project has the expectation that you would run something like npm run test
which just looks like jest
in the package.json
. So, please keep your configuration inside the package.json
as opposed to using command line arguments.
If have a more complex setup, it can probably be supported, check out the settings. They are all prefixed with jest
.
Also, you should use Jest 17+, however 16 works - it will just offer a warning. We're aiming to try and do current Jest version - 1, but won't specifically drop support for older versions unless we're forced into it.
I'd like to give a shout out to Wallaby.js, which is a significantly more comprehensive and covers a lot more editors, if this extension interests you - check out that too.
If you don't use the root of your project for you JS with Jest tests, do not worry, you can still use this project. You will need to use the "Start Jest Runner" command, and maybe have to configure your own jest.pathToJest
setting inside the .vscode/settings.json
to whatever you would use.
These are the activation events which trigger the runner to start:
"activationEvents": [
"workspaceContains:node_modules/.bin/jest",
"workspaceContains:node_modules/react-scripts/node_modules/.bin/jest",
"onCommand:io.orta.jest.start"
],
These are the things that will trigger the extension loading. If one of these applies, and you're not seeing the "Jest" in the bottom bar, run the command Open Developer Tools
and see if something has crashed, we'd love to know what that is, and ideally a project we can run against.
The extension is in two parts, one is this repo. It contains all the VS Code specific work.
git clone https://github.com/orta/vscode-jest
cd vscode-jest
yarn install
code .
The other part is inside the Jest source code. It's a node module called "jest-editor-support".
It's very possible that you're going to want to make changes inside here, if you're doing something that touches the test runner process or file parsers. To get that set up to work I'd recommend doing this:
cd ..
git clone https://github.com/facebook/jest.git
cd jest
yarn install
With that installed, you want to use a custom jest-editor-support
by going into cd packages/jest-editor-support
and running yarn link
.
Go back to vscode-jest, and do one more yarn link "jest-editor-support"
and now you're using those files directly from master of Jest.
As jest-editor-support
requires running through babel, you can run the babel watcher for all jest files by running yarn run watch
inside the jest root directory.
Yeah, it's a bit of a process, but we'll be sharing code with the nuclide team and that's worth it IMO.