# JavaScript and TypeScript test coverage

> Set up Supercov with your agent, or run it yourself with Vitest, Jest, node:test or Playwright.

Web page: https://supercov.com/docs/javascript
All Supercov pages for agents: https://supercov.com/llms.txt · Full text: https://supercov.com/llms-full.txt

Ask your coding agent to set up Supercov in your project:

```text supercov-prompt
Set up Supercov in this JavaScript or TypeScript project using npx supercov.
Read npx supercov docs and run our existing tests. Show the coverage report
and any measurement limits. Don't change application code or tests.
```

## Run it yourself

You'll need Node.js 22 or newer and your project's test dependencies.
For browser tests, start any services your suite needs.

Run Supercov through npx; no global install is needed:

```sh
npx supercov --version
```

### Run your tests

Put Supercov before the command you normally run:

```sh
npx supercov -- npm test
```

If you invoke the runner directly, use the matching command instead:

```sh
npx supercov -- npx vitest run
npx supercov -- npx jest
npx supercov -- npx playwright test
```

This works with JavaScript, JSX, TypeScript and TSX, including React components.
Keep your runner and build configuration. Supercov measures an isolated copy
and builds it if your tests use compiled output.

### React, React Native and Expo

React component tests work with Testing Library and Vitest/jsdom, Vitest Browser
Mode, or Babel/Jest. Mixed Vitest Node/browser projects keep their own setup.
React Native and Expo use their existing Jest presets and native mocks:

```sh
npx supercov -- npm test -- --runInBand
```

Keep the test command your project normally uses. Supercov 0.0.55 fixes Expo
configuration forwarding, Babel runtime imports, duplicate Jest test names and
coverage from React effect cleanup during teardown.

RN support here covers JavaScript component tests. It does not cover Hermes,
native modules or device E2E. React hydration has been tested in jsdom and
Chromium; Next.js Server Components, streaming SSR and server actions are not
established by those checks. See [React and RN support](https://supercov.com/docs/supported-suites.md#react-and-react-native)
for scope and the runnable example.

### Component tests in a real browser

Vitest Browser Mode runs your component tests in a real browser. Supercov
measures it per test like any other Vitest run -- lines, branches, MC/DC and
assertion coverage. The compatibility suite exercises Chromium through the
Playwright provider:

```sh
npx supercov -- npx vitest run
```

Expressions rendered inside JSX are measured in their own right, so an
`aria-label={label(state)}` that never evaluates is not counted as covered
because the component rendered once. That is also what lets a UI assertion be
explained precisely: `toHaveAccessibleName` is about the attribute and
`toHaveTextContent` about the child, and each earns credit separately.

`expect.element(...)`, `expect.soft(...)` and `expect.poll(...)` count as
assertions, so browser assertions can be mapped like any other.

Read the result and list a few gaps:

```sh
npx supercov runs latest
npx supercov runs latest gaps --limit 5
```

With Vitest, Jest, node:test, Playwright, Mocha, AVA and node-tap, Supercov
identifies which test ran each piece of code.
See [runner support](https://supercov.com/docs/supported-suites.md#javascript-and-typescript) for browser
and custom-assertion limits.

## Try a small example

[Download the examples](https://supercov.com/downloads/supercov-language-examples.zip), extract them,
and open `supercov-examples/javascript`. This JavaScript example uses node:test
and needs no extra test dependencies.

In `src/session.js`, checkout requires a signed-in customer and a session that
hasn't expired:

```js
export function checkout(signedIn, expired, price, quantity) {
  if (signedIn && !expired) {
    const total = price * quantity;
    return { status: 'confirmed', total };
  }
  return { status: 'denied', total: 0 };
}
```

The two tests check a valid order and a signed-out visitor. Run them:

```sh
npx supercov -- npm test
npx supercov runs latest
```

The coverage section recorded with Supercov 2.0.0 is:

```text
Coverage
  Lines      100.00% (5/5)
  Branches   100.00% (2/2)
  MC/DC      50.00% (1/2)
```

Both branches ran, but no test checks an expired session for a signed-in customer.
Inspect that decision:

```sh
npx supercov runs latest decision src/session.js:2
```

The report includes:

```text
signedIn && !expired
C1 covered: signedIn
C2 MISSING: !expired
```

A test for a signed-in customer with an expired session closes the gap. In the
[recorded run](https://supercov.com/downloads/coverage-guide-recordings.json), MC/DC reaches 100%;
line and branch coverage stay the same. See [MC/DC](https://supercov.com/docs/mcdc.md) for how it works.

## Check what the tests assert

These tests check the returned status, but not the total. An assertion such as
`assert.equal(order.total, 50)` would check the calculation for this input.

Supercov can ask [Jev](https://typesafe.ai) whether each test would fail if a
statement it ran changed. `runs latest assertions assess` saves the answers
(it needs `TYPESAFE_API_KEY`), and `runs latest assertions` then lists the
statements no test checks, file by file. A statement that is not asserted
runs in some test, but nothing that test checks depends on it. See
[Assertion coverage](https://supercov.com/docs/assertions.md).

Already using Vitest coverage? See [how the reports differ](https://supercov.com/compare/vitest-coverage.md).
Need to know which test covers a line? See [per-test coverage in Vitest](https://supercov.com/compare/vitest-per-test-coverage.md).
`npx supercov docs coverage-model` prints the guide for your installed version.