How to View Test Coverage in VS Code

Test coverage tells you which lines of your code were executed during a test run. VS Code shows coverage results visually: colored gutters, percentage trees, and a toolbar that jumps to untested code.

Coverage works only if your testing extension and framework support it. Most modern test frameworks do, but you may need a plugin (like pytest-cov for Python or nyc for Mocha).

Run tests with coverage

In the Test Explorer, the toolbar has a button that looks like a shield with a checkmark. That is the Run with Coverage button. Click it to run all tests and collect coverage data.

To run coverage on a subset, right-click any test, group, or file in the Test Explorer and select Execute Using Profile > Run with Coverage. You can also right-click the gutter play button in the editor and pick the coverage option from the context menu.

The first time you run coverage, VS Code may prompt you to select a coverage profile. Choose the one that matches your framework. For JavaScript, this is typically the built-in coverage profile. For Python, VS Code uses pytest-cov if available.

The test run completes as normal. After it finishes, coverage results appear in three places.

Read coverage in the editor (inline overlay)

Open any source file that is part of your project. If your tests touched that file, you see colored markers.

Green lines appear in the left gutter for code that was executed. The editor also lightly highlights the line background in green. Hover over the gutter and a tooltip shows how many times that line ran.

Red lines were never executed during the test run. The gutter and background highlight in a reddish tone.

Yellow lines mean partial coverage. This happens when a conditional statement was reached, but only one branch was taken. For example, an if/else where the test only exercised the if path.

To toggle the inline overlay on and off, click the Show Inline Coverage button in the editor title bar, or use the Test: Show Inline Coverage command from the Command Palette.

Read coverage in the Test Coverage view

The Test Coverage view is a separate panel inside the Testing area. Open it by clicking Test Coverage in the Testing view toolbar, or select Testing: Focus on Test Coverage View from the Command Palette.

It shows your project as a tree, with each file displaying a coverage percentage and a color bar:

• Green bar: high coverage (80% or above by default).
• Yellow bar: moderate coverage.
• Red bar: low coverage.

Expand a file to see individual functions and their coverage percentages. This is useful when a file has good overall coverage but one critical function is untested.

The thresholds for green, yellow, and red are configurable with the testing.coverageBarThresholds setting.

Read coverage in the Explorer

After a coverage run, the Explorer file list can show coverage percentages next to each file. This is off by default.

Enable it in Settings: open the Settings editor (Ctrl+, on Windows/Linux, Cmd+, on macOS) and search for testing.showCoverageInExplorer. Check the box. Now every file in the Explorer shows a small percentage badge.

Hover over a file to see a breakdown: how many statements, branches, and functions were covered.

Navigate uncovered code

Finding the specific lines that need tests is easier with the Test Coverage toolbar.

Enable it by setting testing.coverageToolbarEnabled to true in Settings. Once enabled, a toolbar appears at the top of any open editor that has coverage data.

The toolbar shows:

• The current file's overall coverage percentage.
• Left and right arrow buttons to jump to the previous or next uncovered code block.
• A toggle button to show or hide the inline coverage overlay.

Click the down arrow to jump to the first uncovered block. Read the code, understand what it does, then decide whether it needs a test. Click the arrow again to move to the next block.

Understand coverage limitations

High coverage does not mean your tests are good. It only means lines were executed. A test can run a function without making meaningful assertions about its output.

Coverage also does not tell you whether edge cases are handled. A function with 100% line coverage might still return wrong results for unusual input.

Use coverage as a discovery tool. Look for red and yellow lines. Ask yourself: "What would happen if this line received unexpected input?" Then write a test that covers that case.

Troubleshooting

No coverage data appears after running with coverage

Your test framework may need a coverage plugin or configuration. For Python, install pytest-cov: run pip install pytest-cov in your environment. For Mocha, install nyc: run npm install --save-dev nyc. For Jest, coverage is built in, but you may need to add "collectCoverage": true to your Jest config.

The coverage overlay shows colors but no percentages

The inline coverage overlay shows line execution status but not percentages. Switch to the Test Coverage view or enable coverage in the Explorer for numerical data.

Coverage percentages are different from what my CI reports

VS Code uses the same coverage data your test runner produces, but different tools may count statements, branches, functions, and lines differently. Check which metric you are comparing. You can change the displayed metric with testing.displayedCoveragePercent (options: total, statement, or minimum).

Once you understand which code needs tests, learn how to filter, organize, and rerun tests so you focus on exactly what matters. For more on reading and fixing test output, see how to run and debug tests.