如何使用测试库测试 Material UI 按钮背景颜色？

Question

Material UI 的Button 组件呈现一个相对简单的按钮元素，其背景颜色可以在网络检查器中看到。

但是当我们在 testing-library/react 渲染中使用 getComputedStyle 检查时，报告的颜色是“透明的”。

有没有办法测试按钮的背景颜色？

例如，如果一个组件返回：

<Button data-testid="blah" variant="contained" color="primary">
  hi
</Button>

它会创建一个带有默认主题的蓝色按钮 (#3f51b5)。但是这个测试：

it("renders with the correct background color", () => {
  const { getAllByTestId } = render(<App />);
  const button = getAllByTestId("blah")[0];
  const buttonStyle = window.getComputedStyle(button);
  const backgroundColor = buttonStyle["background-color"];
  expect(backgroundColor).toEqual("#3f51b5");
});

失败

Expected: "#3f51b5"
Received: "transparent"

Codesandbox link

Answer 1

得到了answer to this on GitHub，但长话短说，这是 JSDOM 工作方式的结果。 “解决方案”是用赛普拉斯之类的东西来测试它，而不是测试库。 ¯\_(ツ)_/¯