如何使用 React 測試庫和 jest 測試條件渲染的字符串

Question

嗨，我是 React 測試庫的新手，需要一些幫助。 我想使用 React 測試庫測試以下代碼，以根據 boolean 的可見性道具有條件地確定組件上的文本是“活動”還是“非活動”：

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

任何幫助將不勝感激！ 謝謝！

Answer 1

這是您可以為組件編寫的測試示例：

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();
});