React Ref 的 offsetheight，即使在加载内容后，对于玩笑测试用例也始终返回“0”

Question

我正在使用react-testing-library和jest。在 componentdidupdate 中尝试获取“ this.testRef.current.offsetHeight ”，即使在加载内容后，offsetHeight 仍为0 。我想要 DOM 的精确 offsetHeight 因为有一些基于它的条件。

在反应测试库和笑话中是否有任何可能的解决方案可以解决。

我正在使用angerouslySetInnerHTML来绑定testRef 元素的html 内容。

Answer 1

你可以这样做：

  const originalOffsetHeight = Object.getOwnPropertyDescriptor(
    HTMLElement.prototype,
    'offsetHeight'
  );
  const originalOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth');
  beforeAll(() => {
    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
      configurable: true,
      value: 200,
    });
    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { 
      configurable: true, value: 200 
    });
  });

  afterAll(() => {
    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', originalOffsetHeight);
    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', originalOffsetWidth);
  });