ISSUE: My test coverage drops in vitest when I integrate the react compiler, can that be fixed?

[heath-freenome]

I've configured vitest to use the react compiler via babel plugin like so:

plugins: [
    react({
      babel: {
        plugins: [
          ['babel-plugin-react-compiler', {
            runtimeModule: 'react-compiler-runtime'
          }]
        ]
      }
    })
  ],

When I did that my branch coverage dropped. Will there be a way for the plugin to provide information (maps?) that can be used by coverage tools to verify that all the original source lines are actually being covered by tests?

In my situtation, I had a simple stateless functional component that generated an SVG with an optional title like so:

export default interface LogoProps {
  /** The title to display in the SVG if given */
  readonly titleAccess?: string;
  /** Any other props */
  readonly [x: string]: string | number | boolean | undefined;
}
export const PATH = <path
      d="M13.343 6.67152C13.343 10.3354 10.3902 13.343 6.67169 13.343C3.00782 13.343 0 10.3901 0 6.67152C0 2.95297 2.95314 0 6.67169 0C10.3356 0.0546845 13.343 3.00766 13.343 6.67152Z"
      fill="#056370"
    />;
export default function FnArrow({ titleAccess = '', ...props }: Readonly<LogoProps>) {
  return (
    <svg {...props}>
      {PATH}
      {titleAccess && <title>{titleAccess}</title>}
    </svg>
  );

The generated code looked like:

import { c as _c } from "react/compiler-runtime";

export const PATH = <path
      d="M13.343 6.67152C13.343 10.3354 10.3902 13.343 6.67169 13.343C3.00782 13.343 0 10.3901 0 6.67152C0 2.95297 2.95314 0 6.67169 0C10.3356 0.0546845 13.343 3.00766 13.343 6.67152Z"
      fill="#056370"
    />;

export default function FnArrow(t0) {
  const $ = _c(8);
  let props;
  let t1;
  if ($[0] !== t0) {
    ({
      titleAccess: t1,
      ...props
    } = t0);
    $[0] = t0;
    $[1] = props;
    $[2] = t1;
  } else {
    props = $[1];
    t1 = $[2];
  }
  const titleAccess = t1 === undefined ? "" : t1;
  let t2;
  if ($[3] !== titleAccess) {
    t2 = titleAccess && <title>{titleAccess}</title>;
    $[3] = titleAccess;
    $[4] = t2;
  } else {
    t2 = $[4];
  }
  let t3;
  if ($[5] !== props || $[6] !== t2) {
    t3 = <svg {...props}>{PATH}{t2}</svg>;
    $[5] = props;
    $[6] = t2;
    $[7] = t3;
  } else {
    t3 = $[7];
  }
  return t3;
}

And vitest says that the branches for titleAccess = '' and {titleAccess && <title>{titleAccess}</title>} aren't fully covered.

NOTE: This is just for a simple component. I'm guessing as my components get more complex their coverage data will change significantly

[aniruddhaadak80]

Hi there! Taking a look at your issue regarding ISSUE: My test coverage drops in vitest when I integrate the react compiler, can that be fixed? in the context of reactwg/react-compiler...

When working with the React Compiler (React Forget), this type of behavior usually stems from how the compiler analyzes hook dependencies and component boundaries. Make sure that:

1. Your code strictly adheres to the Rules of React. The compiler bails out or behaves unexpectedly when it detects rule violations.
2. In certain cases, explicitly defining memoization boundaries or isolating the hook/component into its own tightly-scoped file helps the Babel plugin successfully parse the AST.
3. Verify your ESLint eslint-plugin-react-compiler rules are green before compilation, as the compiler relies heavily on those guarantees.

Hope this helps clarify the expected boundaries! Let me know if you have a minimal repro I can test against.