Jest snapshot testing of FlatList renderItem

Question

I have a wrapper for Flatlist called FlatListShadow but for this post FlatListShadow and FlatList is the same thing

I need to test the renderItem function in FlatListShadow which looks like this

renderItem={({ item }) => (
      <Device
        title={item.deviceName}
        platform={item.platform}
        updatedAt={item.updatedAt}
        status={item.status}
        selectDevice={() => selectDevice(item.deviceId)}
        isSelected={selectedDeviceIdList.includes(item.deviceId)}
      />
    )}

Unfortuanately in the snapshot it only gives this information

renderItem={[Function]}

Answer 1

If you're using enzyme you can achieve it like this

// prepare a mock item to render the renderItem with
const mockItem = {
  deviceName: 'mock device name',
  platform: 'mock platform',
  updatedAt: 123,
  status: 'mock status',
  deviceId: '1-2-3-4',
}

describe('YourComponent', () => {
  let shallowWrapper
  beforeAll(() => {
    shallowWraper = shallow(<YourComponent />);
  });

  it('should match the snapshot', () => {
    // will generate snapshot for your component
    expect(shallowWrapper).toMatchSnapshot();
  });

  describe('.renderItem', () => {
    let renderItemShallowWrapper;

    beforeAll(() => {
      // find the component whose property is rendered as renderItem={[Function]}
      // if we presume it's imported as ComponentWithRenderItemProp
      // find it and get it's renderItem property 
      RenderItem = shallowWraper.find(ComponentWithRenderItemProp).prop('renderItem');

      // and since it's a component render it as such
      // with mockItem
      renderItemShallowWrapper = shallow(<RenderItem item={mockItem} />);
    });

    it('should match the snapshot', () => {
      // generate snapshot for the renderItem
      expect(renderItemShallowWrapper).toMatchSnapshot();
    });
  });
});