vscode-recipes/debugging-jest-tests/README.md

102 строки
3.1 KiB
Markdown

# Debugging tests in VS Code
by [Jag Reehal](https://twitter.com/jagreehal)
This recipe shows how to use the built-in Node Debugger to debug [Jest](https://facebook.github.io/jest/) tests.
## The example
The test folder contains two files that test the lib/calc.js file.
To try the example you'll need to install dependencies by running:
`npm install`
## Configure launch.json File for your test framework
* Click on the Debugging icon in the Activity Bar to bring up the Debug view.
Then click on the gear icon to configure a launch.json file, selecting **Node** for the environment:
* Replace content of the generated launch.json with the following configurations:
```json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Jest All",
"program": "${workspaceFolder}/node_modules/.bin/jest",
"args": ["--runInBand"],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"disableOptimisticBPs": true,
"windows": {
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
}
},
{
"type": "node",
"request": "launch",
"name": "Jest Current File",
"program": "${workspaceFolder}/node_modules/.bin/jest",
"args": [
"--runTestsByPath",
"${relativeFile}",
"--config",
"jest.config.js"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"disableOptimisticBPs": true,
"windows": {
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
}
}
]
}
```
## Configure package.json File for your test framework
* Add following Jest configuration to package.json:
```
"jest": {
"testEnvironment": "node"
}
```
**Note for windows users** : if `node_modules/jest` is not available in your project, but `node_modules/jest-cli` is installed (e.g. if you are [using react-boilerplate](https://github.com/react-boilerplate/react-boilerplate/blob/v3.6.0/package.json#L221)) you can replace the windows attribute by this one for both launch configurations :
```json
"windows": {
"program": "${workspaceFolder}/node_modules/jest-cli/bin/jest",
}
```
## Debugging all tests
You can debug all tests by following the steps below:
1. Set a breakpoint in a test file or files.
2. Go to the Debug view, select the **'Jest All'** configuration, then press F5 or click the green play button.
3. Your breakpoint will now be hit.
> **Note**: Your breakpoint may not be hit on the first run. If it isn't hit, you can rerun the tests by pressing `a` at the prompt in the Terminal. Or, by adding a `debugger` statement to the top of the script (this just gives vscode time to process the script's sourcemaps when it is loaded).
![all](all.gif)
## Debugging the current test
You can debug the test you're editing by following the steps below:
1. Set a breakpoint in a test file.
2. Go to the Debug view, select the **'Jest Current File'** configuration, then press F5 or click the green play button.
3. Your breakpoint will now be hit. (If not, see **Note** above).
![current](current.gif)