如何使用反应测试库和玩笑来测试主题切换器？

Question

I am trying to test whether the bg color changes after clicking the theme toggler.

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

I have wrapped my components with ThemeProvider, but the background-color remains white even after clicking.

Answer 1

If you are using @testing-library/user-event , when you should use async functions and wait until user similated events ends up

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