Usage with react-test-renderer

I’m trying to unit test components that render RV components with the react-test-renderer, and running into this error: https://github.com/facebook/react/issues/7371.

It seems like an issue with the usage of findDOMNode. What is the recommended way to unit test RV components?

[thielium]

Noting the above caveats about mocking the DOM, I adapted the AutoSizer’s mock, though it’s a little white-boxy.

describe("My Test", () => {
  const originalOffsetHeight = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetHeight');
  const originalOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth');

  beforeAll(() => {
    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', { configurable: true, value: 50 });
    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { configurable: true, value: 50 });
  });

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

I’ve noticed some issues that are pretty challenging to reproduce by defaulting the value of AutoSizer to the grid (column sizes aren’t recalculated though the width has changed). That’s the only real reason to mock rather than to default. If I can repro, I’ll make a bug.

[izakfilmalter]

Even easier solution:

<AutoSizer>
  {({ width, height }) => (
    <List
      height={height || 100}
      width={width || 100}
    />
  )}
</AutoSizer>