Code Coverage in NX monorepo with Playwright CT React

Open
#29 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Needs clarification
Activity status
Stale
Tech stack
playwright, react, typescript, vite
Domain
frontend, testing, tooling

Research direction

Start with the supplied ctViteConfig and compare how Playwright CT React loads its Vite plugins with the vite-plugin-istanbul configuration shown. Verify whether the custom plugin hooks run for the component-test sources and whether coverage is generated; done means the relevant source is instrumented and a coverage report is produced.

Written by the indexing model from the issue text.

Description

I've been looking for a way to get code coverage report for my component tests that use @playwright/experimental-ct-react , and I've followed the guide mentioned here, but it seems, the vite-instanbul-plugin isn't able to transform the relevant code.

I added a custom plugin to debug if transform would happen, but the callback doesn't trigger.

Here'e my ctViteConfig :

ctViteConfig: {
			plugins: [
				react(),
				// Custom debug plugin to check if plugins are loading
				{
					name: 'debug-plugin-loader',
					configResolved(config: any) {
						console.log('🔧 DEBUG: Plugin loaded - configResolved hook called');
						console.log(
							'🔧 DEBUG: Vite config plugins:',
							config.plugins?.map((p: any) => p.name || 'unnamed'),
						);
						console.log('🔧 DEBUG: Environment:', config.env);
						console.log('🔧 DEBUG: Command:', config.command);
						console.log('🔧 DEBUG: Mode:', config.mode);
					},
					buildStart() {
						console.log('🚀 DEBUG: Build started - buildStart hook called');
					},
					transform(code: string, id: string) {
						if (id.includes('/src/') && (id.endsWith('.tsx') || id.endsWith('.ts'))) {
							console.log('🔄 DEBUG: Transforming file:', id);
							console.log('🔍 DEBUG: Code sample (first 100 chars):', code.substring(0, 100));
							// Check if Istanbul has already instrumented this code
							const isInstrumented = code.includes('__cov_') || code.includes('__coverage__');
							console.log('📊 DEBUG: File instrumented by Istanbul:', isInstrumented);
						}
						return null; // Don't modify the code, just log
					},
					generateBundle() {
						console.log('📦 DEBUG: Bundle generation - generateBundle hook called');
					},
				},
				istanbul({
					include: 'src/**/*',
					exclude: ['node_modules', 'test', '**/*.spec.*', '**/*.story.*'],
					extension: ['.js', '.jsx', '.ts', '.tsx'],
					requireEnv: false,
					forceBuildInstrument: true,
					checkProd: false,
				}),
			] as any,
			build: {
				sourcemap: true,
			},
		},

Relevant package versions :

@playwright/experimental-ct-react: 1.56.1
playwright: 1.56.1 
vite-plugin-istanbul: 7.2.0

Any pointers that would help me with this?

Dominant language
TypeScript
Stars
143
Forks
20
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from mxschmitt/playwright-test-coverage

All issues in mxschmitt/playwright-test-coverage

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.