[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.