React-testing-library 如何测试条件渲染

Question

我是反应测试库的新手

我正在尝试测试我的组件，里面有条件渲染。

是我的组件：

const ComponentA = () => {
   const [isActive, setIsActive] = (false);
   const toggle = () => {
     setIsActive(!isActive)
   }
   return (
     <>
       <div>
         <h1 onClick={toggle}>Title</h1>
       </div>
       {isActive && (<div className="some"><h4>SubTitle</h4></div>)}
     </>
   )
}

这是我的测试：

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

it("renders without crashing", async () => {
  const wrapper = render(
      <ComponentA />
  );
  expect(wrapper).toMatchSnapshot();
  wrapper.unmount();
});

这里测试已通过，但我不想测试 isActive 情况。因此，如果带有 className 的 div 处于活动状态，则某些内容将呈现或不呈现，例如。

我怎样才能做到这一点？

Answer 1

最好尽可能地测试您的组件，以了解它们在浏览器中的使用方式。在您的情况下，这意味着单击带有文本“Title”的元素。@testing-library/react有一个很好的方法可以做到这一点fireEvent。

import React from "react";
import { ComponentA } from "./";
import { render, screen, fireEvent } from "@testing-library/react";
import '@testing-library/jest-dom';

it("renders without crashing", () => {
  render(
      <ComponentA />
  );

  expect(screen.getByText("Title")).toBeInTheDocument();
  // use queryBy* for checking existence,
  // no element with text "Subtitle" should be on screen
  expect(screen.queryByText("Subtitle")).toBe(null); 

  // Simulate clicking on "Title"
  fireEvent.click(screen.getByText("Title"));
  // Now "Subtitle" should be on screen
  expect(screen.getByText("Subtitle")).toBeInTheDocument();

  // Click again so that "Subtitle" disappears
  fireEvent.click(screen.getByText("Title"));
  // "Subtitle" should be gone
  expect(screen.queryByText("Subtitle")).toBe(null);

  // cleanup done automatically
});