如何使用 React 测试库和 jest 测试条件渲染的字符串

Question

Hi I'm new to React testing library and need some assistance. I would like to test the following code using React testing library to determine the text on the component conditionally either to be 'Active' or 'Inactive' based on the visibility prop which is a boolean:

const SomeComponent = ({visibility}) => {
         return (
            <Badge>
              {visibility ? 'Active' : 'Inactive'}
            <Badge />
          );
 };

Any help would be greatly appreciated! Thank you!

Answer 1

Here is an example of tests you can write for your component:

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

it("displays only active when visibility is true", () => {
  const { queryByText } = render(<SomeComponent visibility={true} />);
  expect(queryByText("Active")).toBeInTheDocument();
  expect(queryByText("Inactive")).not.toBeInTheDocument();
});

it("displays only inactive when visibility is false", () => {
  const { queryByText } = render(<SomeComponent visibility={false} />);
  expect(queryByText("Active")).not.toBeInTheDocument();
  expect(queryByText("Inactive")).toBeInTheDocument();
});