3

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):

screenshot of the markdown working

screenshot of the HTML code working

1
  • 2
    We have the same problem with react-markdown and jest. We think it's because of the jest-environment-jsdom Jul 6, 2022 at 8:58

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.