How to test a function is returning jsx in react-testing-library?

Question

How can I test using jest/react-testing-library that a component is returning specific JSX?

I have toBeInstanceOf, etc, but it is hard to find information about "react-testing-library"

these are a few examples

  const className = props.className;

  if (!props.action) {
    return props.children;
  }

  const { id, type, target } = props.action;
  if (type === "EXTERNAL") {
    return (
      <a className={className} href={target}>
        {props.children}
      </a>
    );
  }

  if (["page"].includes(type.toLowerCase())) {
    return (
      <Link className={className} key={id} to={"/" + target}>
        {props.children}
      </Link>
    );
  }

  if (type.toLowerCase() === "play") {
    return props.children;
  } ...

as you can see every return is different jsx.

dangerismycat dangerismycat · Accepted Answer · 2020-03-06T00:49:24

Ideally you should be looking for user-facing DOM elements, like text, labels, etc. However, for this sort of component, you may need to fall back to using test ids. You can add data-test-id="SomeComponent" to the various elements you're returning and then look for that using getByTestId (or queryByTestId, etc).

How to test a function is returning jsx in react-testing-library?

1 Answers