React-testing-library 不从样式表渲染计算样式

Posted 2023-03-17

【中文标题】React-testing-library 不从样式表渲染计算样式

【英文标题】：React-testing-library not rendering computed styles from stylesheet

【发布时间】：2020-04-23 10:00:36

【问题描述】：

基本场景是这样的：我有一个组件，它具有样式表中定义的width: 100%。因此它应该保留其父组件的宽度。我想计算我的组件的宽度并将其应用于我的子组件，因为我通过createPortal 渲染它并且我希望它们具有相同的宽度。这在浏览器中有效。但是，在我的测试中，我发现window.getComputedStyle(component) 没有返回从样式表应用的任何样式。

按照建议，我可以模拟 javascript 窗口，但我认为这实际上与我希望做的事情背道而驰。我想验证浏览器中存在的行为，window.getComputedStyle() 返回应用的所有样式，而不仅仅是内联样式。

我已将一个简单的示例放入代码框：https://codesandbox.io/s/goofy-wilson-6v4dp

也在这里：

function App() 
  return (
    <div className="App">
      <WidthComponent />
    </div>
  ) 


function WidthComponent() 
  const myInput = useRef();
  const [inputWidth, setInputWidth] = useState(0);

  useEffect(() => 
    console.log("in handleLoad");
    const width = myInput.current ? myInput.current.offsetWidth : 0;
    setInputWidth(width);
  , [myInput]);

  return (
    <div className="inherited-width" ref=myInput>
      <div style= width: inputWidth  className="child-element">
        Hello
      </div>
    </div>
  );


// test
test("width is inherited", () => 
  const  rerender  = render(
    <div style= width: "452px" >
      <WidthComponent />
    </div>
  );
  const element = document.getElementsByClassName("child-element").item(0);
  rerender(
    <div style= width: "452px" >
      <WidthComponent />
    </div>
  );
  expect(window.getComputedStyle(element).width).toBe("452px");
);

.App 
  font-family: sans-serif;
  text-align: center;
  width: 500px;


.inherited-width 
  width: inherit;

感谢任何帮助。

【问题讨论】：

代码沙箱是一个不错的附加功能，但您需要在您的问题中添加一个 MVCE，以便您的问题将来可以帮助其他人。

这能回答你的问题吗？ How to mock the JavaScript window object using Jest?

我不这么认为...我不想模拟窗口，我希望它在浏览器中表现得像它在浏览器中所做的那样，但它似乎并没有这样做。在浏览器中，window.getComputedStyle() 返回所有样式，包括在样式表中定义的样式，但它似乎并没有开玩笑。这只是一个已知的限制吗？

这里的重点是您可能需要模拟窗口。如果你注销它，它可能是undefined。

你有没有想过这个问题？

【参考方案1】：

但是，在我的测试中，我发现 window.getComputedStyle(component) 没有返回从样式表应用的任何样式。

请注意，如果您在 JSDOM 中运行测试（即每个 Jest 测试），则 CSS 并未完全实现。具体来说，CSS 的级联部分没有实现（https://github.com/jsdom/jsdom/pull/2690）。仅部分实现了继承（display 和 visibility）（https://github.com/jsdom/jsdom/issues/2160）。

我建议只在浏览器而不是 JSDOM 中运行断言计算样式的测试。代码沙盒测试未在实际浏览器环境中运行。