如何使用 react-testing-library 测试 React 组件的 css 属性？

Question

react-testing-library 背后的理念对我来说很有意义，但我正在努力将它应用于 css 属性。

例如，假设我有一个简单的切换组件，单击时显示不同的背景颜色：

import React, { useState } from "react";
import "./Toggle.css";

const Toggle = () => {
  const [ selected, setSelected ] = useState(false);
  return (
    <div className={selected ? "on" : "off"} onClick={() => setSelected(!selected)}>
      {selected ? "On" : "Off"}
    </div>
  );
}

export default Toggle;

.on {
  background-color: green;
}

.off {
  background-color: red;
}

我应该如何测试这个组件？我编写了以下测试，它适用于内联组件样式，但在使用 css 类时失败，如上所示。

import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import Toggle from "./Toggle";

const backgroundColor = (element) => window.getComputedStyle(element).backgroundColor;

describe("Toggle", () => {
  it("updates the background color when clicked",  () => {
    render(<Toggle />);
    fireEvent.click(screen.getByText("Off"));
    expect(backgroundColor(screen.getByText("On"))).toBe("green");
  });
});

Answer 1

所以这不是单元或集成测试框架所做的。他们只测试逻辑。

如果您想测试样式，那么您需要一个端到端/快照测试框架，例如 Selenium。