Coverage reporting issue related to compiler transformations.
The issue involves incorrect coverage reports when using the React compiler, likely due to how it transforms and memoizes component code. The fix may require changes to how generated code is handled in source maps or coverage tools. The exact implementation details are unclear, and it may involve understanding compiler internals.
https://github.com/ValentinGurkov/vitest-react-compiler-missing-coverage-repro
Hello,
I've been testing out the new React compiler and have noticed that the code coverage report becomes incorrect with the compiler turned it. I believe it may be related to the way it changes the output react component code.
I've created a minimal reproduction repository to demonstrate the issue: š https://github.com/ValentinGurkov/vitest-react-compiler-missing-coverage-repro, but I also want to share my findings here:
The button we are going to test is a simple one:
export const Button = () => {
return <button>Click me</button>;
};
As well as its test:
import { page } from '@vitest/browser/context';
import { Button } from '@repo/components/ui/button.js';
import { describe, expect, it} from 'vitest';
import { render } from 'vitest-browser-react';
describe(Button, () => {
it('renders with default variants', async () => {
render(<Button />);
const button = page.getByRole('button', { name: 'Click me' });
await expect.element(button).toBeInTheDocument();
});
});
The coverage report with the React compiler turned on looks like:
ā browser (chromium) test/components/ui/button.test.tsx (1 test) 9ms
ā Button > renders with default variants 9ms
Test Files 1 passed (1)
Tests 1 passed (1)
Start at 20:34:46
Duration 632ms (transform 0ms, setup 133ms, collect 28ms, tests 9ms, environment 0ms, prepare 93ms)
% Coverage report from v8
------------|
Claim this issue to let others know you're working on it. You'll earn 20 points when you complete it!