Usage with react-test-renderer

[arbesfeld]

I'm trying to unit test components that render RV components with the react-test-renderer, and running into this error: facebook/react#7371.

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

[bvaughn]

Some components (eg AutoSizer, CellMeasurer) require a real (or at least reasonable) DOM. You can try to mock things out but I think it would be particularly difficult for CellMeasurer

Other components (eg WindowScroller, CellMeasurer, Table) depend on findDOMNode. You could try to mock it, as Dan suggests here. Or you could just do what I do to test react-virtualized itself (eg example test).

Most react-virtualized components don't need a real DOM and so can be tested with Jest. However AutoSizer, CellMeasurer, and WindowScroller are not Jest-compatible b'c they require DOM methods that JSdom doesn't implement. I haven't had much luck mocking them out either; it ends up being too complex and brittle.

[silvenon]

A very awkward way to mock AutoSizer: 🤣

// MyComp.js
import React from 'react';
import { Grid } from 'react-virtualized';
let { AutoSizer } = require('react-virtualized');

if (process.env.NODE_ENV === "test") {
  AutoSizer = require('react-virtualized/dist/commonjs/AutoSizer');
}

class MyComp extends React.Component {
  render() {
    return (
      <AutoSizer>
        {({ width, height }) => (
          <Grid
            width={width}
            height={height}
            {/* ... */}
          />
        )}
      </AutoSizer>
    );
  }
}

// MyComp.test.js
import React from 'react';
import MyComp from './MyComp';

jest.mock('react-virtualized/dist/commonjs/AutoSizer', () => {
  const width = 1024;
  const height = 768;
  return ({ children }) =>
    <div>{children({ width, height })}</div>;
});

// ...

I couldn't find a way to mock only AutoSizer without polluting my application code.

[silvenon]

Actually, that's completely unnecessary, you can do this instead in your application code:

<AutoSizer>
  {({ width, height }) => {
    let actualWidth = width;
    let actualHeight = height;
    if (process.env.NODE_ENV === 'test') {
      actualWidth = window.innerWidth;
      actualHeight = window.innerHeight;
    }
    // do something with these dimensions
  }}
</AutoSizer>

This will prevent width and height from being 0 on subsequent renders.

The contents of AutoSizer will not re-render on resize, but that's E2E territory anyway.

[izakfilmalter]

Even easier solution:

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

[rickarubio]

@izakfilmalter nice solution, thanks for sharing!

[tomasstankovic]

<AutoSizer defaultWidth={100} defaultHeight={100}></AutoSizer>

[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.

[mzedeler]

This works for me:

jest.mock(
  'react-virtualized-auto-sizer',
  () => ({ children }) => children({ height: 600, width: 600})
)

[AnnyCaroline]

@mzedeler

I'm having this error

[lokeshpathrabe]

@mzedeler Thanks for the workaround. It worked for me.
@AnnyCaroline I guess you need to find from where you are importing AutoSizer. This is what worked for me:

jest.mock('react-virtualized/dist/es/AutoSizer', () => ({ children }) => children({ height: 600, width: 600 }), );

[AnnyCaroline]

Thanks @lokeshpathrabe . Your code solved the errors but my virtualized list don't seem to render its items.

Instead, I ended up using this code, based on @thielium answer:

jest.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(1500)
jest.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(1500)

[ldavidpace]

For the next person who struggles to get it importing. I am using typescript and import Autosizer like this:

import {
    AutoSizer,
} from 'react-virtualized';

To get the mock to work I had to re-export the rest of react-virtualized like so:

jest.mock('react-virtualized', () => {
  const ReactVirtualized = jest.requireActual('react-virtualized');
  return {
    ...ReactVirtualized,
    AutoSizer: ({
      children,
    }) => children({height: 1000, width: 1000}),
  };
});

[IgorKharkiv]

For the next person who struggles to get it importing. I am using typescript and import Autosizer like this:

import {
    AutoSizer,
} from 'react-virtualized';

To get the mock to work I had to re-export the rest of react-virtualized like so:

jest.mock('react-virtualized', () => {
  const ReactVirtualized = jest.requireActual('react-virtualized');
  return {
    ...ReactVirtualized,
    AutoSizer: ({
      children,
    }) => children({height: 1000, width: 1000}),
  };
});

@ldavidpace, thanks a lot! You saved my day.

[yangfei4913438]

Thanks @lokeshpathrabe . Your code solved the errors but my virtualized list don't seem to render its items.

Instead, I ended up using this code, based on @thielium answer:

jest.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(1500)
jest.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(1500)

It is ok! thanks a lot!

[gap777]

Thanks @lokeshpathrabe . Your code solved the errors but my virtualized list don't seem to render its items.

Instead, I ended up using this code, based on @thielium answer:

jest.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(1500)
jest.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(1500)

This kinda works, but ends up making every HTML element think it's 1500px tall... including Menus (and Popover), which complain bitterly:

Material-UI: The popover component is too tall.
Some part of it can not be seen on the screen (748px).
Please consider adding a max-height to improve the user-experience.

[keeganbrown]

Thanks @lokeshpathrabe . Your code solved the errors but my virtualized list don't seem to render its items.
Instead, I ended up using this code, based on @thielium answer:

jest.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(1500)
jest.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(1500)

This kinda works, but ends up making every HTML element think it's 1500px tall... including Menus (and Popover), which complain bitterly:

Material-UI: The popover component is too tall.
Some part of it can not be seen on the screen (748px).
Please consider adding a max-height to improve the user-experience.

In my case 500px for each dimension was unnecessary. I was able to use a value of 2 and it worked just as well:

    jest.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(2);
    jest.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(2);

[julia-loggi]

@ldavidpace thank you, your code works for me. And I just improved it and made a module

//  __mocks__/react-virtualized.js

import React from 'react';

const ReactVirtualized = jest.requireActual('react-virtualized');

module.exports = {
  ...ReactVirtualized, 
  AutoSizer: ({children}) => children({height: 1000, width: 1000})
};

And all you need just add the line jest.mock('react-virtualized'); at the top of a test file

[mjangir]

@mzedeler Thanks for the workaround. It worked for me.
@AnnyCaroline I guess you need to find from where you are importing AutoSizer. This is what worked for me:

jest.mock('react-virtualized/dist/es/AutoSizer', () => ({ children }) => children({ height: 600, width: 600 }), );

What if I import it using import AutoSizer from 'react-virtualized-auto-sizer';?

[MoSattler]

@mjangir see this #493 (comment)

[john-wego]

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.

Thanks for this!!