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

Question

我是 react-testing-library 的新手

我正在尝试测试内部具有条件渲染的组件。

是我的组件:

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

最好尽可能地测试您的组件，以了解它们在浏览器中的使用方式。在您的情况下，这意味着单击带有文本“标题”的元素。 @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
});