Skip to content

Instantly share code, notes, and snippets.

@elevine
Created January 20, 2017 16:55
Show Gist options
  • Select an option

  • Save elevine/69a27e067032c53d64d66f4f56e978cc to your computer and use it in GitHub Desktop.

Select an option

Save elevine/69a27e067032c53d64d66f4f56e978cc to your computer and use it in GitHub Desktop.
Jest mock for the react-virtualized AutoSizer component
// __mocks__/react-virtualized.js
// note - at the top of your test file, include this line: jest.mock('react-virtualized');
import React from 'react';
const reactVirtualized = jest.genMockFromModule('react-virtualized');
const autoSizerProps = {
height: 100,
width: 100
}
const MockAutoSizer = ( props ) => {
return <div> { props.children(autoSizerProps) } </div>;
};
reactVirtualized.AutoSizer = MockAutoSizer;
module.exports = reactVirtualized;
@julia-loggi
Copy link

julia-loggi commented May 25, 2021

@davidimoore this code didn't work for me either, so I did this stuff in my project. Maybe it'll help you

bvaughn/react-virtualized#493 (comment)

@alexqguo
Copy link

alexqguo commented Jun 1, 2021

try returning/exporting a new object

const reactVirtualized = jest.requireActual('react-virtualized');
// return/export this depending on what you're doing
{
  ...reactVirtualized,
  AutoSizer: whateverYouWant,
}

@Emad-Armoun
Copy link

If you installed only the auto-sizer sub-module, then you can use this code which is written using TypeScript and ES6 modules:

// react-virtualized-auto-sizer.tsx

import React from 'react';

type AutoSizerChildrenProps = {
  children: ({ height, width }: { height: number; width: number }) => void;
};

const AutoSizer = ({ children }: AutoSizerChildrenProps) => (
  <div>{children({ height: 600, width: 1000 })}</div>
);

export default AutoSizer;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment