如何使用反應測試庫和玩笑來測試主題切換器？

Question

我正在嘗試測試單擊主題切換器后 bg 顏色是否發生變化。

test("Toggle changes from light to dark mode", () => {
  render(<DashboardPage />);
  const themeToggler = screen.getByRole("button");
  const dashboardBackground = screen.getByTestId("dashboard-menu");

  expect(themeToggler).toBeInTheDocument();
  expect(dashboardBackground).toHaveStyle(
    "background-color: rgb(255, 255, 255)"
  );
  userEvent.click(themeToggler);
  expect(dashboardBackground).toHaveStyle("background-color: rgb(0,0,0)");
});

我用 ThemeProvider 包裝了我的組件，但即使在單擊后背景顏色仍然是白色。

Answer 1

如果您正在使用@testing-library/user-event ，您應該何時使用async函數並等待用戶模擬事件結束

test("Toggle changes from light to dark mode", async () => {
  render(<DashboardPage />);
  const themeToggler = screen.getByRole("button");
  const dashboardBackground = screen.getByTestId("dashboard-menu");

  expect(themeToggler).toBeInTheDocument();
  expect(dashboardBackground).toHaveStyle(
    "background-color: rgb(255, 255, 255)"
  );
  await userEvent.click(themeToggler);
  expect(dashboardBackground).toHaveStyle("background-color: rgb(0,0,0)");
});