Get zero coverage with nyc and playwright

Question

I'm struggling to set up coverage correctly using Playwright. It reports 0 coverage in all files (except the test files themselves, if I include them).

I'm getting inspiration from https://playwright.dev/docs/api/class-coverage and https://github.com/bgotink/playwright-coverage/blob/main/src/fixtures.ts. Our project is a monorepo where tests in a folder e2e-tests/ run end to end tests on servers contained in other adjacent folders, e.g. frontend/.

The current setup is using a page fixture like so in each test-file:

// frontend.spec.ts
import { test, expect } from "../fixtures";

test("something", ({ page ) => {
    // Do test stuff with page
});

where the fixture is defined as

// fixtures/page.ts
import { Page, TestInfo } from "@playwright/test";

const pageWithCoverage = async (
  { page, browserName }: { page: Page; browserName: string },
  use: (page: Page) => Promise<void>,
  testInfo: TestInfo
) => {
  if (!page.coverage) throw new Error(`Could not collect coverage with browser "${browserName}"`);

  console.log("📈 Collecting coverage");
  await page.coverage.startJSCoverage();
  await use(page);
  await page.coverage.stopJSCoverage();
};

export default pageWithCoverage;

To collect coverage I run

npx nyc --all --cwd ".." --include "**/frontend/**/*  --nycrc-path e2e-tests/.nycrc npm t

where the relevant part concerning the file structure is:

 --all --cwd ".." --include "**/frontend/**/*"

I'm using a .nycrc file containing nyc-config-tsx in order to instrument tsx files:

// .nycrc
{
  "extends": "nyc-config-tsx",
  "all": true
}

Can you tell what the issue is?

The frontend is built using next.

I get similar results storing results to files using v8toIstanbul and running npx nyc report

Imperil

Answer 1

I had this same problem today, at pretty much the one-year anniversary of your issue. I found this question hoping it had an answer...

Anyway, here's what made it work for me.

The repo you linked oddly had no effect for me. It still didn't properly register jsx-type code that you'd find in .tsx files, so every report came without any .tsx files having been instrumented by nyc.

I found the issue to be on this line of that package because if I changed it to include jsx like so:

parserPlugins: parserPlugins.concat('typescript', 'jsx')

in the file inside node_modules, then it worked.

So the fix became to re-make that file in my own project, and then extend it in the nyc config file.

// nyc-config.js

'use strict';
const { parserPlugins } = require('@istanbuljs/schema').defaults.nyc;
module.exports = {
  cache: false,
  parserPlugins: parserPlugins.concat('typescript', 'jsx'),
};

// .nycrc.json

{
  "extends": "./nyc-config.js",
  "reporter": ["cobertura", "lcov"],
  "all": true,
  "include": [
    "**/*.tsx",
    "**/*.ts"
  ],
  "exclude": [
    // ...
  ],
}

After that, nyc was able to instrument .tsx files and check them for coverage.

EDIT:

My project uses Vite to build, as opposed to OP's next, and it's important that the server you run tests against enables coverage tracking.

For instance, in playwright.config.ts, you'd have

webServer: {
  command: 'VITE_COVERAGE=true npx nyc npm run start',
  port: 5173,
},

if you were using Vite.

Pteridology