为什么在开玩笑的反应测试中容器的宽度为零

Question

我是开玩笑的新人。我试图获取容器的宽度，但容器的宽度为 0。为什么？这是代码。

test('test Currency List Table', () => {
  const {container } = render(<CurrencyList />);
  console.log('width', container.scrollWidth, container.clientWidth, container.offsetWidth );
  // All of these are zero
  expect(container.clientWidth).toEqual(600);
});

CurrencyList 是 Mui Table

Answer 1

因为jsdom不支持布局。参见 Unimplemented parts of the web platform

Layout: the ability to calculate where elements will be visually laid out as a result of CSS, which impacts methods like getBoundingClientRects() or properties like offsetTop.

您必须模拟 HTML 元素的这些属性。

using Object.defineProperty() to change what various layout-related getters and methods return.

为什么在开玩笑的反应测试中容器的宽度为零

why width of container is zero in react testing with jest

reactjs

jestjs