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.
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 />);
});
