如何編寫測試用例來切換組件的反應？

Question

我是編寫單元測試用例的初學者。 我想編寫測試用例來切換組件。 我是這樣寫的：

test("should toggle the component", ()=> {
const toggleComp = jest.fn();
const isOpen: boolean = false;
const btnEl = screen.getByTestId("button");
fireEvent.click(toggleBtn);
expect(isOpen).toBe(true);
})  

它顯示失敗：

expected: true
received: false 

expect(isOpen).toBe(true);
               ^

誰能幫我解決這個問題？ 提前致謝！

我期待 output：

當我們單擊按鈕時，isOpen 值應該為 true，否則為 false。

Answer 1

一旦你解雇了fireEvent.click(btnEl); 事件，再次檢查screen切換的組件/元素是否已呈現

例如： expect(screen.getByText(/toggled text/i)).toBeInTheDocument(); or expect(screen. getByTestId("toggledId")).toBeInTheDocument(); expect(screen.getByText(/toggled text/i)).toBeInTheDocument(); or expect(screen. getByTestId("toggledId")).toBeInTheDocument();

在您的場景中，與isOpen沒有關聯，因為它是一個測試用例變量

在下面添加了幾個示例

import { useState } from "react";

const ToggleButton = () => {
  const [isToggled, setToggle] = useState(false);

  return (
    <button data-testid="toggleButton" onClick={() => setToggle(!isToggled)}>
      {isToggled ? "Toggled" : "Initial"}
    </button>
  );
};

export default ToggleButton;

測試步驟

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

test("Test ToggleButton", async () => {
  render(<ToggleButton />);

  expect(screen.getByText(/Initial/i)).toBeInTheDocument();

  const buttonElment = screen.getByTestId("toggleButton");
  fireEvent.click(buttonElment);

  expect(screen.getByText(/Toggled/i)).toBeInTheDocument();

  fireEvent.click(buttonElment);

  expect(screen.getByText(/Initial/i)).toBeInTheDocument();
});