Question

我有一个称为FlatListShadow的Flatlist包装器，但对于此帖子，FlatListShadow和FlatList是同一件事

我需要在如下所示的FlatListShadow中测试renderItem函数

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

不幸的是，在快照中它仅提供此信息

renderItem={[Function]}

Answer 1

如果您使用的是enzyme，可以这样实现

// 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();
    });
  });
});

FlatList renderItem的Jest快照测试

1 个答案: