[Bug]: Sourcemap generation with playwright-ct is incorrect

[estercheyn]

Version

1.49.0

Steps to reproduce

Hello,
I'm have a React+ TypeScript + Vite + Vitest + Playwright-CT app and want to merge the coverage of the vitest unit tests with the coverage of the playwright-ct component tests. However, it seems like playwright-ct and vitest calculate the metrics differently due to an issue with the source map. I created a little repo to reproduce the issue:

1. Clone repo https://github.com/[estercheyn/vitest-playwright](https://github.com/estercheyn/vitest-playwright)
2. Install dependencies npm install
3. Run unit tests: npm run test-unit and component tests npm run test-ct

Expected behavior

I expect the branchMap, statementMap and fnMap to be the same for playwright-ct and vitest

Actual behavior

Compare coverage/playwright-ct/coverage-final.json and coverage/vitest/coverage-final.json. You will see that for the App.tsx the branchMap is different:

In vitest the first branch is starting in line 9 and ending in line 11.

//vitest
"src\\App.tsx": {
    "path": "src\\App.tsx",
    "statementMap": {
      "0": {
        "start": { "line": 1, "column": 7 },
        "end": { "line": 1, "column": 33 }
      },
      "1": {
        "start": { "line": 6, "column": 0 },
        "end": { "line": 41, "column": 1 }
      },
      "2": {
        "start": { "line": 7, "column": 2 },
        "end": { "line": 7, "column": 40 }
      },
      "3": {
        "start": { "line": 9, "column": 2 },
        "end": { "line": 11, "column": 3 }
      },
      "4": {
        "start": { "line": 10, "column": 4 },
        "end": { "line": 10, "column": 42 }
      },
      "5": {
        "start": { "line": 13, "column": 2 },
        "end": { "line": 39, "column": 7 }
      }
    },
    "fnMap": {
      "0": {
        "name": "App",
        "decl": {
          "start": { "line": 6, "column": 0 },
          "end": { "line": 6, "column": 15 }
        },
        "loc": {
          "start": { "line": 6, "column": 15 },
          "end": { "line": 41, "column": 1 }
        },
        "line": 6
      },
      "1": {
        "name": "(anonymous_1)",
        "decl": {
          "start": { "line": 27, "column": 19 },
          "end": { "line": 27, "column": 25 }
        },
        "loc": {
          "start": { "line": 27, "column": 25 },
          "end": { "line": 27, "column": 55 }
        },
        "line": 27
      },
      "2": {
        "name": "(anonymous_2)",
        "decl": {
          "start": { "line": 27, "column": 34 },
          "end": { "line": 27, "column": 45 }
        },
        "loc": {
          "start": { "line": 27, "column": 45 },
          "end": { "line": 27, "column": 54 }
        },
        "line": 27
      }
    },
    "branchMap": {
      "0": {
        "loc": {
          "start": { "line": 9, "column": 2 },
          "end": { "line": 11, "column": 3 }
        },
        "type": "IfStatement",
        "locations": [
          {
            "start": { "line": 9, "column": 17 },
            "end": { "line": 11, "column": 3 }
          },
          { "start": {}, "end": {} }
        ],
        "line": 9
      }
    },
    "s": { "0": 1, "1": 1, "2": 1, "3": 1, "4": 0, "5": 1 },
    "f": { "0": 1, "1": 0, "2": 0 },
    "b": { "0": [0, 1] }
  },

In playwright-ct, it's starting in line 9 and ending in line 10:

// playwright-ct
"src\\App.tsx": {
    "src\\App.tsx",
    "statementMap": {
      "0": {
        "start": { "line": 6, "column": 0 },
        "end": { "line": 41, "column": 1 }
      },
      "1": {
        "start": { "line": 7, "column": 2 },
        "end": { "line": 7, "column": 39 }
      },
      "2": {
        "start": { "line": 9, "column": 2 },
        "end": { "line": 10, "column": 41 }
      },
      "3": {
        "start": { "line": 10, "column": 4 },
        "end": { "line": 10, "column": 41 }
      },
      "4": {
        "start": { "line": 13, "column": 2 },
        "end": { "line": 39, "column": 5 }
      }
    },
    "fnMap": {
      "0": {
        "name": "App",
        "decl": {
          "start": { "line": 6, "column": 0 },
          "end": { "line": 6, "column": 15 }
        },
        "loc": {
          "start": { "line": 6, "column": 15 },
          "end": { "line": 41, "column": 1 }
        },
        "line": 6
      },
      "1": {
        "name": "(anonymous_1)",
        "decl": {
          "start": { "line": 27, "column": 19 },
          "end": { "line": 27, "column": 25 }
        },
        "loc": {
          "start": { "line": 27, "column": 25 },
          "end": { "line": 27, "column": 55 }
        },
        "line": 27
      },
      "2": {
        "name": "(anonymous_2)",
        "decl": {
          "start": { "line": 27, "column": 34 },
          "end": { "line": 27, "column": 45 }
        },
        "loc": {
          "start": { "line": 27, "column": 45 },
          "end": { "line": 27, "column": 54 }
        },
        "line": 27
      }
    },
    "branchMap": {
      "0": {
        "loc": {
          "start": { "line": 9, "column": 2 },
          "end": { "line": 10, "column": 41 }
        },
        "type": "IfStatement",
        "locations": [
          {
            "start": { "line": 9, "column": 17 },
            "end": { "line": 10, "column": 41 }
          },
          { "start": {}, "end": {} }
        ],
        "line": 9
      }
    },
    "s": { "0": 2, "1": 2, "2": 2, "3": 1, "4": 2 },
    "f": { "0": 2, "1": 1, "2": 1 },
    "b": { "0": [1, 1] }
  },

I asked in this issue about it cenfun/monocart-coverage-reports#94 and this comments suggests that the source map generation in playwright-ct is not correct cenfun/monocart-coverage-reports#94 (comment) .

Additional context

No response

Environment

System: Windows 11
npm packages:
"@playwright/experimental-ct-react": "1.49.0",
"@playwright/test": "1.49.0",
"typescript": "5.7.2",
"vite": "5.4.11",
"vitest": "2.1.5",

[Skn0tt]

Thanks! We can reproduce, the sourcemap seems indeed wrong.

[estercheyn]

Thank you for confirming! Are there plans to include a fix in the next version? This is currently blocking for us as we cannot merge our unit and component test coverages.

[Manjunath224]

Any update on the status of this issue or any suggestions for temporary workarounds while a resolution is being worked on ?

[agg23]

This appears to be a problem with Vite sourcemap generation. I can replicate the same issue with the current vite creation template:

npm create vite@latest vite-build -- --template react-ts

Set vite.config.ts to:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    sourcemap: true,
    minify: false,
  }
})

npm run build

Some cursory searching does not point to any particular Vite issue where they've identified this. It probably is specifically for [jt]sx files.

[custundag]

Is there any update on this problem, or any estimation when this issue could be resolved? @Skn0tt

[agg23]

As per my above comment, since the issue occurs directly with the vite React template, this is an upstream issue. You can file an issue on them if you'd like.

Since this has never been reported on us, and since I can't find anyone reporting it on vite, it's likely that you've run into an extremely niche usecase that is not likely to be very high priority. I would suggest looking into whether and why vitest's sourcemaps are correct, as vitest is also using vite for everything.