I get this weird green text hightlight in jsx in a react component in Instanbul code report. My understanding is that Instanbul wrongly interprets jsx's forward slash as a string or more likely a regular expression literal, not a jsx. I use create-react-app (npx create-react-app) with react-testing library. I also tried with vite, same thing. Google gives no similar issues whatsoever. Has no one faced this bug before?

If you inspect the DOM you see that prettify.css assings it a .str class with color: #080; So it thinks it's a string.

enter image description here

component under test:

export function Example() {
  return (
    <div>
      <h1>heading 1</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Non a repudiandae similique est eos
        unde debitis sunt eveniet ducimus et.
      </p>
      <div>some div</div>
      <div>another div</div>
      <h2>heading 2</h2>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam, explicabo?</p>
    </div>
  );
}

test:

import { Example } from "./Example";
import { render } from "@testing-library/react";

it("test", () => {
  render(<Example />);
});

0

There are 0 best solutions below