FlatList renderItem 的开玩笑快照测试

Question

我有一个名为 FlatListShadow 的 Flatlist 包装器，但是对于这个 post 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();
    });
  });
});

Answer 2

如果您使用的是 jest :

describe('EasyToUseSection', () => {
  it.only('flatlist should return renderItem correctly', () => {
    const itemData = {
      name: 'Name',
      desc: 'Description',
    };
   const { getByTestId } = renderComponent();
   expect(getByTestId('flatlist')).toBeDefined();
   const element = getByTestId('flatlist').props.renderItem(itemData);
   expect(element.props.data).toStrictEqual(itemData);
   expect(element.type).toBe(Device);
   });
});

这样可以检查发送的数据，还可以检查组件呈现的类型

FlatList renderItem 的开玩笑快照测试

Jest snapshot testing of FlatList renderItem

snapshot

jestjs

react-native

react-native-flatlist