I have a rather simple "markdown formatter" in my code. It gets a string and returns a ReactNode:
export const markdownFormatter = (cellData: string): React.ReactNode => {
try {
return (
<ReactMarkdown remarkPlugins={[remarkGfm]}>{cellData}</ReactMarkdown>
);
} catch (error) {
console.error(error);
return <>{"Something went wrong when displaying this content."}</>;
}
};
I'm trying to test it using react-testing-library
like this:
test(`pass markdown content | expect it to be rendered as markdown`, () => {
const text = 'This is a **markdown** text';
const { container } = render(
<div>{markdownFormatter('this is some **markdown** text!')}</div>,
);
expect(container.firstChild).toContainHTML(
'This is a <strong>markdown</strong> text',
);
});
But for some reason, the content ISN'T rendered as Markdown in the container:
Expected:
this is some <strong>markdown</strong> text!
Received:
<div>this is some **markdown** text!</div>
I checked and the formatter does work when just adding it to a page, so something is wrong with the test (or the render
).
Here's how I'm using it in my app (literally the same):
<div>
{markdownFormatter('this is some **markdown** text!')}
</div>
Resulting with this HTML (rendered and inspected):