React-native Тестируйте взаимодействие отдельных элементов в FlatList с помощью jest и энзима - PullRequest
Новая
       96

React-native Тестируйте взаимодействие отдельных элементов в FlatList с помощью jest и энзима

0 голосов
/ 14 июля 2020

У меня есть компонент как -> 

  render() {
    const { plantTypes } = this.props.plantTypesData;
    return (
      <View>
        <FlatList
          data={plantTypes}
          ListFooterComponent={this.renderLoader}
          keyExtractor={this.keyExtractor}
          renderItem={this.plantType}
          onScroll={() => { this.onEndReachedCalledDuringMomentum = false; }}
        />
      </View >
    );
  }

И мой Flatlist элемент выглядит как -> 

 plantType = ({ item }) => {
    const { onChangePlantType } = this.props;
    const { plantTypesDataCount } = this.props.plantTypesData;
    return (
      <View style={styles.plantType}>
        <TouchableComponent onPressFunction={onChangePlantType}
        obj={{ selectedPlantTypeId: item.id, selectedPlantTypeName: item.attributes.name, selectedPlantTypeCount: plantTypesDataCount[item.id] }}>
          <View style={styles.plantTypeWrapper}>
            <View style={styles.titleCountContainer}>
              <Text style={styles.title}>{item.attributes.name}</Text>
              <Text style={styles.count}>{plantTypesDataCount[item.id]}</Text>
            </View>
            <HTMLView stylesheet={styles} value={formatText(item.attributes.description)} />
          </View>
        </TouchableComponent>
      </View>
    );
  };

Итак, я хочу протестировать интерактивность с моим отдельным элементом плоского списка (length, pressfunction et c)

Итак, я попытался использовать shallow, но я знал, что shallow визуализирует только до первого уровня компонентов и не будет визуализировать мульти-вложенный компонент, поэтому я использовал shallow например, 

wrapper = shallow(
    <PlantTypeList {...{plantTypesData: plantTypesData, onChangePlantType: props.onChangePlantType}}>
      <FlatList {...{data: plantTypesData.plantTypes}}>
        <TouchableComponent {...{onPressFunction: props.onChangePlantType}}/>
      </FlatList>
    </PlantTypeList>
  );

Но если я хочу протестировать -> 

    it('should have TouchableComponent equal to the total no of plant types', () => {
      const len = plantTypesData.plantTypes.length
    expect(wrapper.find('View').shallow().find('FlatList').find('TouchableComponent')).toHaveLength(len);
    });
  });

Но там написано - 

   Expected length: 2
    Received length: 0
    Received object: {}
    > 51 |         expect(wrapper.find('View').shallow().find('FlatList').find('TouchableComponent')).toHaveLength(len);
         |                                                                                          ^
      52 |       });
      53 |     });

Я не уверен, как проверить интерактивность <TouchableComponent>

  describe('interactivity/functionality', () => {
    it('should call onChangePlantType', () => {
      wrapper.find('TouchableComponent').at(0).simulate('PressFunction');
      expect(props.onChangePlantType).toHaveBeenCalledTimes(1);
    });
  });

Я хочу провести два вышеупомянутых теста, ни shallow, ни mount не позволяя мне протестировать NESTED <TouchableComponent> под <FlatList> Любая помощь очень ценится, я пробовал несколько способов, но не вышло

...