基本场景是这样的:我有一个组件width: 100%
正如样式表中所定义的。因此它应该保留其父组件的宽度。我想计算组件的宽度并将其应用到我的子组件,因为我通过渲染它createPortal
我希望它们的宽度相同。这在浏览器中有效。然而,在我的测试中,我发现window.getComputedStyle(component)
不返回从样式表应用的任何样式。
正如所建议的,我可以模拟 javascript 窗口,但这实际上与我希望做的事情相反,我认为。我想验证浏览器中存在的行为window.getComputedStyle()
返回所有应用的样式,而不仅仅是内联样式。
我在codesandbox中放入了一个简单的例子:https://codesandbox.io/s/goofy-wilson-6v4dp 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;
}
任何帮助表示赞赏。
但是,在我的测试中,我发现 window.getCompulatedStyle(component) 没有返回从样式表应用的任何样式。
请注意,如果您在 JSDOM 中运行测试(即每个 Jest 测试),则 CSS 并未完全实现。具体来说,CSS的级联部分没有实现(https://github.com/jsdom/jsdom/pull/2690 https://github.com/jsdom/jsdom/pull/2690)。继承仅部分实现(display
and visibility
) (https://github.com/jsdom/jsdom/issues/2160 https://github.com/jsdom/jsdom/issues/2160).
我建议仅在浏览器中运行对计算样式进行断言的测试,而不是在 JSDOM 中。 Codesandbox 测试未在实际的浏览器环境中运行。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)