feedback

[stereobooster]

Thanks for the project. Some feedback

1. I discovered that when used with React one needs to disable HMR to get correct coverage with Playwright

   // https://vitejs.dev/config/
   export default defineConfig({
     server: {
       hmr: false,
     }
   })

2. Running tests against dev server is 20% slower than running against production build. But I wasn't able to produce "correct" report for production build (with source maps). Correct in this case means - the one which can be merged with unit tests coverage. It looks good, but when I merge it with unit tests coverage - numbers are wrong.

[cenfun]

I don't think it will work with hmr.

[stereobooster]

My point is that one needs explicitly turn it off (it is turned on by default in latest Vite + React), And maybe it would be nice to mention it somewhere in the documentation.

If you have any ideas how to run it against production build - would be glad to hear it.

Thanks anyway.

[cenfun]

I think HMR should only be enabled in development mode, not in production mode.
try vite preview but not vite dev

[stereobooster]

vite preview uses production build (serves from build folder, what is there after vite build). I tried that, it doesn't work - those two coverage reports can't be merged properly (numbers are wrong after merge)

[cenfun]

Please try the following solutions:

• 1,

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    hmr: process.env.NODE_V8_COVERAGE ? false : true,
  }
})

• 2,

// package.json
"scripts": {
        "dev": "vite --host",
        "dev-for-coverage": "npm run dev --coverage=true",
  },

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    hmr: process.env.npm_config_coverage ? false : true,
  }
})

[stereobooster]

It was working fine, than out of sudden Playwright coverage started to generate reports without path. All files just have name, without path (AlertBox.tsx instead of src/components/AlertBox.tsx)

  entryFilter: {
    '**/src/**/*.ts': true,
    '**/src/**/*.tsx': true,
  },
  sourcePath: (filePath, info) => {
    if (filePath.replace('localhost-3000/')) {
      return filePath.replace('localhost-3000/', '')
    }
    if (info.url && info.url.startsWith('http://localhost:3000/')) {
      return info.url.replace('http://localhost:3000/', '')
    }
    return filePath
  },
  sourceFilter: {
    '**/node_modules/**': false,
    '**/**': true
  },

If I add

 logging: 'debug',
 sourceMap: true

Report looks like this

UPD: nevermind. Fixed it:

entryFilter: {
    '**/src/**/*.ts': true,
    '**/src/**/*.tsx': true,
  },
  sourceFilter: {
    '**/node_modules/**': false,
    '**/mock/**': false,
    '**/*.test.tsx': false,
    '**/*.test.ts': false,
    '**/**': true,
  },
  sourcePath: (filePath, info) => {
    if (filePath.startsWith('localhost-3000/')) {
      return filePath.replace('localhost-3000/', '')
    }
    if (info.url && info.url.startsWith('http://localhost:3000/')) {
      return info.url.replace('http://localhost:3000/', '')
    }
    if (info.distFile && info.distFile.startsWith('src/')) {
      return info.distFile
    }
    return filePath
  },