Skip to content

Commit ce2f7f1

Browse files
jagreehaljagreehal
committed
Added recipe for debugging Jest and Mocha tests in VS Code
1 parent 169d098 commit ce2f7f1

File tree

17 files changed

+288
-0
lines changed

17 files changed

+288
-0
lines changed

‎README.md

+3
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ A collection of recipes for using VS Code with particular technologies.
1616

1717
- [Debugging Angular/C# apps with AspNetCore.SpaTemplates](https://github.com/Microsoft/vscode-recipes/tree/master/Angular-SpaTemplates)
1818

19+
- [Debugging Mocha tests](https://github.com/Microsoft/vscode-recipes/tree/master/debugging-mocha-tests)
20+
21+
- [Debugging Jest tests](https://github.com/Microsoft/vscode-recipes/tree/master/debugging-jest-tests)
1922
## Container Technology
2023

2124
- [Debugging TypeScript in a Docker Container](https://github.com/weinand/vscode-recipes/tree/master/Docker-TypeScript)

‎debugging-jest-tests/.vscode/launch.json

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"version": "0.2.0",
3+
"configurations": [
4+
{
5+
"type": "node",
6+
"request": "launch",
7+
"name": "Jest All",
8+
"program": "${workspaceRoot}/node_modules/jest/bin/jest",
9+
"args": [
10+
"--runInBand"
11+
],
12+
"console": "integratedTerminal",
13+
"internalConsoleOptions": "neverOpen"
14+
},
15+
{
16+
"type": "node",
17+
"request": "launch",
18+
"name": "Jest Current File",
19+
"program": "${workspaceRoot}/node_modules/jest/bin/jest",
20+
"args": [
21+
"${file}"
22+
],
23+
"console": "integratedTerminal",
24+
"internalConsoleOptions": "neverOpen"
25+
}
26+
]
27+
}

‎debugging-jest-tests/README.md

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# Debugging tests in VS Code
2+
3+
by [Jag Reehal](https://twitter.com/jagreehal)
4+
5+
This recipe shows how to use the built-in Node Debugger to debug [Jest](https://facebook.github.io/jest/) tests.
6+
7+
## The example
8+
9+
The test folder contains two files that test the lib/calc.js file.
10+
11+
To try the example you'll need to install dependencies by running:
12+
13+
`npm install`
14+
15+
## Configure launch.json File for yur test framework
16+
17+
* Click on the Debugging icon in the Activity Bar to bring up the Debug view.
18+
Then click on the gear icon to configure a launch.json file, selecting **Node** for the environment:
19+
20+
* Replace content of the generated launch.json with the following configurations:
21+
22+
```json
23+
{
24+
"version": "0.2.0",
25+
"configurations": [
26+
{
27+
"type": "node",
28+
"request": "launch",
29+
"name": "Jest All",
30+
"program": "${workspaceRoot}/node_modules/jest/bin/jest",
31+
"args": ["--runInBand"],
32+
"console": "integratedTerminal",
33+
"internalConsoleOptions": "neverOpen"
34+
},
35+
{
36+
"type": "node",
37+
"request": "launch",
38+
"name": "Jest Current File",
39+
"program": "${workspaceRoot}/node_modules/jest/bin/jest",
40+
"args": ["${file}"],
41+
"console": "integratedTerminal",
42+
"internalConsoleOptions": "neverOpen"
43+
}
44+
]
45+
}
46+
```
47+
48+
## Debugging all tests
49+
50+
You can debug all tests by following the steps below:
51+
52+
1. Set a breakpoint in a test file or files
53+
54+
2. Go to the Debug view, select the **'Jest All'** configuration, then press F5 or click the green play button.
55+
56+
3. Your breakpoint will now be hit
57+
58+
![all](all.gif)
59+
60+
## Debugging the current test
61+
62+
You can debug the test you're editing by following the steps below:
63+
64+
1. Set a breakpoint in a test file
65+
66+
2. Go to the Debug view, select the **'Jest Current File'** configuration, then press F5 or click the green play button.
67+
68+
3. Your breakpoint will now be hit
69+
70+
![current](current.gif)

‎debugging-jest-tests/all.gif

778 KB
Loading

‎debugging-jest-tests/current.gif

353 KB
Loading

‎debugging-jest-tests/lib/calc.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
exports.add = (x, y) => {
2+
return x + y;
3+
};
4+
5+
exports.subtract = (x, y) => {
6+
return x - y;
7+
};

‎debugging-jest-tests/package.json

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"name": "vscode-recipes-debugging-jest-tests",
3+
"version": "1.0.0",
4+
"description": "This recipe shows how to use the built-in Node Debugger to debug Jest tests",
5+
"scripts": {
6+
"test": "jest"
7+
},
8+
"author": "Jag Reehal",
9+
"license": "ISC",
10+
"dependencies": {
11+
"jest": "22.0.4"
12+
}
13+
}

‎debugging-jest-tests/test/add.spec.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
const { add } = require('../lib/calc');
2+
3+
describe('When adding numbers', () => {
4+
it('Shoud return correct result', () => {
5+
const result = add(1, 2);
6+
expect(result).toEqual(3);
7+
});
8+
});

‎debugging-jest-tests/test/subtract.spec.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
const { subtract } = require('../lib/calc');
2+
3+
describe('When subtracing numbers', () => {
4+
it('Shoud return correct result', () => {
5+
const result = subtract(3, 2);
6+
expect(result).toEqual(1);
7+
});
8+
});

‎debugging-mocha-tests/.vscode/launch.json

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"version": "0.2.0",
3+
"configurations": [
4+
{
5+
"type": "node",
6+
"request": "launch",
7+
"name": "Mocha All",
8+
"program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
9+
"args": [
10+
"--timeout",
11+
"999999",
12+
"--colors",
13+
"${workspaceFolder}/test"
14+
],
15+
"console": "integratedTerminal",
16+
"internalConsoleOptions": "neverOpen"
17+
},
18+
{
19+
"type": "node",
20+
"request": "launch",
21+
"name": "Mocha Current File",
22+
"program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
23+
"args": [
24+
"--timeout",
25+
"999999",
26+
"--colors",
27+
"${file}"
28+
],
29+
"console": "integratedTerminal",
30+
"internalConsoleOptions": "neverOpen"
31+
}
32+
]
33+
}

‎debugging-mocha-tests/README.md

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
# Debugging tests in VS Code
2+
3+
by [Jag Reehal](https://twitter.com/jagreehal)
4+
5+
This recipe shows how to use the built-in Node Debugger to debug [Mocha](https://mochajs.org/) tests.
6+
7+
## The example
8+
9+
The test folder contains two files that test the lib/calc.js file.
10+
11+
To try the example you'll need to install dependencies by running:
12+
13+
`npm install`
14+
15+
## Configure launch.json File for your test framework
16+
17+
* Click on the Debugging icon in the Activity Bar to bring up the Debug view.
18+
Then click on the gear icon to configure a launch.json file, selecting **Node** for the environment:
19+
20+
* Replace content of the generated launch.json with the following configurations:
21+
22+
```json
23+
{
24+
"version": "0.2.0",
25+
"configurations": [
26+
{
27+
"type": "node",
28+
"request": "launch",
29+
"name": "Mocha All",
30+
"program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
31+
"args": [
32+
"--timeout",
33+
"999999",
34+
"--colors",
35+
"${workspaceFolder}/test"
36+
],
37+
"console": "integratedTerminal",
38+
"internalConsoleOptions": "neverOpen"
39+
},
40+
{
41+
"type": "node",
42+
"request": "launch",
43+
"name": "Mocha Current File",
44+
"program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
45+
"args": [
46+
"--timeout",
47+
"999999",
48+
"--colors",
49+
"${file}"
50+
],
51+
"console": "integratedTerminal",
52+
"internalConsoleOptions": "neverOpen"
53+
}
54+
]
55+
}
56+
```
57+
58+
## Debugging all tests
59+
60+
You can debug all tests by following the steps below:
61+
62+
1. Set a breakpoint in a test file or files
63+
64+
2. Go to the Debug view, select the **'Mocha All'** configuration, then press F5 or click the green play button.
65+
66+
3. Your breakpoint will now be hit
67+
68+
![all](all.gif)
69+
70+
## Debugging the current test
71+
72+
You can debug the test you're editing by following the steps below:
73+
74+
1. Set a breakpoint in a test file
75+
76+
2. Go to the Debug view, select the **'Mocha Current File'** configuration, then press F5 or click the green play button.
77+
78+
3. Your breakpoint will now be hit
79+
80+
![current](current.gif)

‎debugging-mocha-tests/all.gif

586 KB
Loading

‎debugging-mocha-tests/current.gif

396 KB
Loading

‎debugging-mocha-tests/lib/calc.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
exports.add = (x, y) => {
2+
return x + y;
3+
};
4+
5+
exports.subtract = (x, y) => {
6+
return x - y;
7+
};

‎debugging-mocha-tests/package.json

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "vscode-recipes-debugging-mocha-tests",
3+
"version": "1.0.0",
4+
"description": "This recipe shows how to use the built-in Node Debugger to debug Mocha tests",
5+
"scripts": {
6+
"test": "mocha 'test/**/*.spec.js'"
7+
},
8+
"author": "Jag Reehal",
9+
"license": "ISC",
10+
"dependencies": {
11+
"chai": "4.1.2",
12+
"mocha": "4.1.0"
13+
}
14+
}

‎debugging-mocha-tests/test/add.spec.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const assert = require('chai').assert;
2+
const { add } = require('../lib/calc');
3+
4+
describe('When adding numbers', () => {
5+
it('Shoud return correct result', () => {
6+
const result = add(1, 2);
7+
assert.equal(result, 3);
8+
});
9+
});

‎debugging-mocha-tests/test/subtract.spec.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const assert = require('chai').assert;
2+
const { subtract } = require('../lib/calc');
3+
4+
describe('When subtracing numbers', () => {
5+
it('Shoud return correct result', () => {
6+
const result = subtract(3, 2);
7+
assert.equal(result, 1);
8+
});
9+
});

0 commit comments

Comments
 (0)