基本场景是这样的：我有一个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", () => …reactjs jestjs react-testing-library react-portal use-effect