如何使用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");
  });
});

- srk

Answer 1

所以单元测试或集成测试框架不会做这个。它们只会测试逻辑。

如果你想要测试样式，那么你需要使用端到端/快照测试框架，如Selenium。

- Devildude4427

---

这个 react-testing-library 的示例测试断言一个按钮是被禁用的。我没有看出那个断言和我正在做的有什么不同 - 你呢？我不会在我的单元/集成测试中测试大多数样式，但是我问题中的示例感觉与众不同。你有关于这个主题的任何推荐阅读吗？ - srk

实际上有很大的区别。检查禁用是检查属性是否被添加 - 这是逻辑。你要做的是检查非内联样式。如果你不在单元/集成测试中测试你的样式，为什么要试图看一个元素是否是绿色？这是一个样式测试。虽然你可以测试内联样式，但那是因为它是通过属性附加到元素上的样式。CSS 需要类似于浏览器的环境来匹配 HTML 的样式表。这只是基本的 HTML/CSS 知识。除非你加载了 CSS（单元测试不会），否则样式无法找到。 - Devildude4427

Answer 2

为了确保样式正确，我更喜欢使用快照测试。那么如何触发事件并为两种状态/情况拍摄快照呢？以下是示例：

import React from 'react'
import {render} from '@testing-library/react'

 it('should take a snapshot when button is toggled', () => {
    const { asFragment } = render(<App />)
    // Fire the event 
    expect(asFragment(<App />)).toMatchSnapshot()
   })
});

- Priyankar Kumar

---

这给了我CSS类名，但它不允许我检查底层的CSS属性。这是我得到的快照：<DocumentFragment><div class="on">On</div></DocumentFragment> - srk

个人而言，我只需要测试该类是否设置为“on”，因为我真正要测试的是切换时是否有主题更改。如果明天“on”类的样式更改并且我想要红色而不是绿色，则不应该破坏切换逻辑的测试。但是如https://dev59.com/safja4cB1Zd3GeqPrCOb和Devildude所述，您可能需要使用内联样式或CSS in JS库才能在快照中显示样式。 - Priyankar Kumar