When writing tests for your application, it can be tedious and distracting to switch between the terminal and IDE to execute tests and verify that all tests are passing. What if there was a more streamlined approach that simply displayed the results of tests directly within the IDE, with each result (passing or failing) adjacent to its corresponding test?

If you are writing tests using the Jest framework, and your IDE of choice is VSCode, then there is a 

 in the VSCode marketplace that automatically runs tests and shows individual test results inline.

Getting this immediate feedback within the editor improves productivity and reduces context switching.

Click the "Extensions" icon in the Activity Bar on the left-side of the VSCode window and type "jest" into the search bar at the top of the Extensions view. Select the result with the publisher "Orta" (the first result with the most downloads).

Install the plugin by clicking on the green "Install" button.

When you open a project in VSCode with a Jest installation (detects Jest in 

), this plugin will automatically start Jest.

To demonstrate the capabilities of this plugin, we will explore how it runs for an existing project with Jest installed.

$ git clone https://github.com/newline-sandbox/rgb-hex.git

Open the project in VSCode, navigate to the 

 file and open it. Take note of the checkmarks, which each indicate a passing test, preceding each 

If it doesn't show up automatically, then manually start the runner:

To enable debugging for Jest tests, create a 

 directory in the root of the project, and inside of this directory, add a 

 configuration file that contains the following:

Here's what each configuration option does:

In short, this configuration automatically launches and attaches the VSCode Node.js debugger to a process running the tests.

 and make a small adjustment to one of the tests. For the first test, store the hex and RGB literals in an object, and reference their values from this object.

it('should convert (255, 255, 255) to "#FFFFFF"', () => {
  const white = {
    rgb: [255, 255, 255],
    hex: "#FFFFFF",
  };

  expect(rgbToHex(...white.rgb)).toEqual(white.hex);
});

Place a breakpoint on the line with the assertion:

 on Windows). Select the option "Debug: Select and Start Debugging," followed by "Debug rgb-hex Tests."

On the left, a debug pane with runtime variables, call stack and breakpoint sections will be shown. Notice how the values of the local variables (in this case, 

On the top, there will be control buttons that can be used to step through, restart or stop the execution of the tests. Since there are no more breakpoints, press the red square button in the control buttons group to stop the execution of the tests.

Experiment! Add more tests and breakpoints. Explore VSCode's debugger's other 

If you want to learn more about testing TypeScript + React applications with Jest, then check out

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Jest VSCode Plugin</h1><p>When writing tests for your application, it can be tedious and distracting to switch between the terminal and IDE to execute tests and verify that all tests are passing. What if there was a more streamlined approach that simply displayed the results of tests directly within the IDE, with each result (passing or failing) adjacent to its corresponding test?</p><p>If you are writing tests using the Jest framework, and your IDE of choice is VSCode, then there is a <a href="https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest" rel="noopener noreferrer nofollow">plugin</a> in the VSCode marketplace that automatically runs tests and shows individual test results inline.</p><p>Getting this immediate feedback within the editor improves productivity and reduces context switching.</p><p>Below, I'm going to show you:</p><ul><li><p>How to install the Jest VSCode plugin.</p></li><li><p>A demo that demonstrates how this plugin can be used for your projects.</p></li><li><p>How to configure VSCode to enable debugging for Jest tests.</p></li><li><p>How to set breakpoints in VSCode for Jest tests.</p></li></ul><h2 class="heading-anchor-text" id="installation"><span>Installation</span><a class="d-inline" href="#installation">#</a></h2><p>Click the "Extensions" icon in the Activity Bar on the left-side of the VSCode window and type "jest" into the search bar at the top of the Extensions view. Select the result with the publisher "Orta" (the first result with the most downloads).</p><figure class="photo figure-position-inline"><img src="https://www.dl.dropboxusercontent.com/s/l6jyzbxqwlf5lur/Screen%20Shot%202021-01-15%20at%2012.24.35%20AM.png" alt="Listing of Extensions - &quot;jest&quot;" contenteditable="false"><div></div></figure><figure class="photo figure-position-inline"><img src="https://www.dl.dropboxusercontent.com/s/v88oybm4r5w6ebk/Screen%20Shot%202021-01-15%20at%2012.30.58%20AM.png" alt="Jest VSCode Plugin" contenteditable="false"><div></div></figure><p>Install the plugin by clicking on the green "Install" button.</p><p>When you open a project in VSCode with a Jest installation (detects Jest in <code>node_modules</code>), this plugin will automatically start Jest.</p><h2 class="heading-anchor-text" id="demo"><span>Demo</span><a class="d-inline" href="#demo">#</a></h2><p>To demonstrate the capabilities of this plugin, we will explore how it runs for an existing project with Jest installed.</p><p>Download this <a href="https://github.com/newline-sandbox/rgb-hex" rel="noopener noreferrer nofollow">project</a> from GitHub:</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-b7bUsjBLwDjle654nzTYK" id="cm-b7bUsjBLwDjle654nzTYK">$ git clone https://github.com/newline-sandbox/rgb-hex.git</textarea><p>Open the project in VSCode, navigate to the <code>__tests__/index.test.ts</code> file and open it. Take note of the checkmarks, which each indicate a passing test, preceding each <code>it</code>.</p><figure class="photo figure-position-inline"><img src="https://www.dl.dropboxusercontent.com/s/6ve65uw2x3hhkuc/Screen%20Shot%202021-01-15%20at%2012.58.30%20AM.png" alt="Jest VSCode Plugin - Passing Tests!" contenteditable="false"><div></div></figure><p>If it doesn't show up automatically, then manually start the runner:</p><ol><li><p>Launch <code>Command Palette</code> (<code>CMD</code> + <code>SHIFT</code> + <code>p</code> on Mac or <code>CTRL</code> + <code>SHIFT</code> + <code>p</code> on Windows).</p></li><li><p>Type "jest" and select the option "Jest: Start Runner."</p></li></ol><figure class="photo figure-position-inline"><img src="https://www.dl.dropboxusercontent.com/s/id33euh45997vwn/Screen%20Shot%202021-01-15%20at%201.05.51%20AM.png" alt="Jest VSCode Plugin - Manually Start the Runner" contenteditable="false"><div></div></figure><h2 class="heading-anchor-text" id="enable-debugging-tests"><span>Enable Debugging Tests</span><a class="d-inline" href="#enable-debugging-tests">#</a></h2><p>To enable debugging for Jest tests, create a <code>.vscode</code> directory in the root of the project, and inside of this directory, add a <code>launch.json</code> configuration file that contains the following:</p><p>(<code>.vscode/launch.json</code>)</p><textarea data-iscodemirror="true" data-mode="application/json" data-uniqueid="cm-OUnte1vo6NEqG5ooazRok" id="cm-OUnte1vo6NEqG5ooazRok">{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug rgb-hex Tests",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/jest",
      "args": ["test", "--runInBand", "--no-cache", "--watchAll=false"],
      "cwd": "${workspaceRoot}",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "env": { "CI": "true" },
      "disableOptimisticBPs": true
    }
  ]
}</textarea><p>Here's what each configuration option does:</p><ul><li><p><code>name</code> - Name of the configuration.</p></li><li><p><code>type</code> - Type of debugger. In this case, use the Node.js debugger.</p></li><li><p><code>request</code> - Type of action to take. In this case, launch the program in debug mode.</p></li><li><p><code>runtimeExecutable</code> - Absolute path to the runtime executable to be used. In this case, set it to the Jest executable in <code>node_modules</code>.</p></li><li><p><code>args</code> - Arguments passed to the program to debug.</p><ul><li><p><code>test</code> - Run the <code>test</code> NPM script.</p></li><li><p><code>--runInBand</code> - Tells Jest to run tests serially in one process. It can be difficult to debug many processes at the same time.</p></li><li><p><code>--no-cache</code> - Disable caching to avoid cache-related issues during debugging.</p></li><li><p><code>--watchAll=false</code> - Disables the Jest watcher, which re-runs tests when any related files are changed. When debugging, Jest should only run the tests once.</p></li></ul><p>This is equivalent to running the following in a terminal:</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-VQ5mqaEpn960zWiQSdJpU" id="cm-VQ5mqaEpn960zWiQSdJpU">$ npm run test --runInBand --no-cache --watchAll=false</textarea></li><li><p><code>cwd</code> - Current working directory. In this case, specify the current working directory as the root of this project.</p></li><li><p><code>console</code> - Type of console to use. In this case, use the <a href="https://code.visualstudio.com/docs/editor/integrated-terminal" rel="noopener noreferrer nofollow">integrated terminal</a> (pops up at the bottom).</p></li><li><p><code>internalConsoleOptions</code> - The visibility of the Debug Console panel during a debugging session. In this case, it is not opened.</p></li><li><p><code>env</code> - Environment variables. In this case, setting <code>CI</code> to <code>"true"</code> forces Jest to run in CI-mode, and tests will only run once. The watcher will not be launched.</p></li><li><p><code>disableOptimisticBPs</code> - Should optimistic breakpoints be disabled? In this case, they should be disabled to allow the debugger to hit the correct lines based on the explicit placement of the breakpoints.</p></li></ul><p>In short, this configuration automatically launches and attaches the VSCode Node.js debugger to a process running the tests.</p><h2 class="heading-anchor-text" id="setting-breakpoints"><span>Setting Breakpoints</span><a class="d-inline" href="#setting-breakpoints">#</a></h2><p>Let's revisit <code>__tests__/index.test.ts</code> and make a small adjustment to one of the tests. For the first test, store the hex and RGB literals in an object, and reference their values from this object.</p><p>(<code>__tests__/index.test.ts</code>)</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-sVDTMAgGxMXEAF51xMbL2" id="cm-sVDTMAgGxMXEAF51xMbL2">it('should convert (255, 255, 255) to "#FFFFFF"', () =&gt; {
  const white = {
    rgb: [255, 255, 255],
    hex: "#FFFFFF",
  };

  expect(rgbToHex(...white.rgb)).toEqual(white.hex);
});</textarea><p>Place a breakpoint on the line with the assertion:</p><figure class="photo figure-position-inline"><img src="https://www.dl.dropboxusercontent.com/s/779egn44k28cdv9/Screen%20Shot%202021-01-15%20at%202.02.31%20AM.png" alt="Setting a Breakpoint" contenteditable="false"><div></div></figure><p>Launch <code>Command Palette</code> (<code>CMD</code> + <code>SHIFT</code> + <code>p</code> on Mac or <code>CTRL</code> + <code>SHIFT</code> + <code>p</code> on Windows). Select the option "Debug: Select and Start Debugging," followed by "Debug rgb-hex Tests."</p><figure class="photo figure-position-inline"><img src="https://www.dl.dropboxusercontent.com/s/pcv766ueafdx3om/Screen%20Shot%202021-01-15%20at%202.20.42%20AM.png" alt="Debug: Select and Start Debugging" contenteditable="false"><div></div></figure><figure class="photo figure-position-inline"><img src="https://www.dl.dropboxusercontent.com/s/nmc2grlbfeuyfwf/Screen%20Shot%202021-01-15%20at%202.20.14%20AM.png" alt="Debug rgb-hex Tests" contenteditable="false"><div></div></figure><p>On the left, a debug pane with runtime variables, call stack and breakpoint sections will be shown. Notice how the values of the local variables (in this case, <code>white</code>) can be observed.</p><figure class="photo figure-position-inline"><img src="https://www.dl.dropboxusercontent.com/s/fetwku9y33ckme4/Screen%20Shot%202021-01-15%20at%202.22.36%20AM.png" alt="Debug Pane" contenteditable="false"><div></div></figure><p>On the top, there will be control buttons that can be used to step through, restart or stop the execution of the tests. Since there are no more breakpoints, press the red square button in the control buttons group to stop the execution of the tests.</p><h2 class="heading-anchor-text" id="next-steps"><span>Next Steps</span><a class="d-inline" href="#next-steps">#</a></h2><p>Experiment! Add more tests and breakpoints. Explore VSCode's debugger's other <a href="https://code.visualstudio.com/docs/editor/debugging" rel="noopener noreferrer nofollow">features</a>.</p><p>If you want to learn more about testing TypeScript + React applications with Jest, then check out<em> <a href="https://www.newline.co/fullstack-react-with-typescript" rel="noopener noreferrer nofollow">Fullstack React with TypeScript</a></em>:</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210125184154109_20201130032331550_hero-2.jpg" attachmentid="22248629-41f9-422c-90ba-7da40c2a7522" contenteditable="false" data-width="600" data-height="356"><div></div></figure><h2 class="heading-anchor-text" id="sources"><span>Sources</span><a class="d-inline" href="#sources">#</a></h2><ul><li><p><a href="https://code.visualstudio.com/Docs/editor/debugging" rel="noopener noreferrer nofollow">VSCode Debugging Documentation</a></p></li><li><p><a href="https://code.visualstudio.com/docs/nodejs/nodejs-debugging" rel="noopener noreferrer nofollow">VSCode Node.js Debugging Documentation</a></p></li></ul><p></p><p></p>

AUTHOR

Ken Chan

When writing tests for your application, it can be tedious and distracting to switch between the terminal and IDE to execute tests and verify that all tests are passing. What if there was a more streamlined approach that simply displayed the results of tests directly within the IDE, with each…

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

Jest VSCode Plugin

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript