Jest React Native FlatList onViewableItemsChanged在使用Jest测试时在函数内部执行

qni6mghb  于 2023-09-28  发布在  Jest
关注(0)|答案(1)|浏览(127)

我正在使用Flatlist中的onViewableItemsChanged属性。功能按预期工作,但当我对相同的功能执行单元测试时,我可以看到函数正在被调用,但在执行单元测试时,函数内部的语句没有被执行。

app.js

const onViewableItemsChanged = React.useCallback(
    ({ viewableItems, changed, viewabilityConfig }) => {
      setActiveIndex(viewableItems);
    },
    [],
  );

  const setActiveIndex = (activeViews) => {
    if (activeViews?.length !== 0) {
      let index = activeViews[0]?.index;
      setActiveViewIndex(index);
    }
  };

  return(
    <View>
      <View>
        <FlatList
          data={checkedInPersonsList}
          horizontal
          showsHorizontalScrollIndicator={false}
          style={{ flexGrow: 0 }}
          contentContainerStyle={{
            paddingHorizontal: containerHorizontalPadding,
          }}
          renderItem={({ item, index }) =>
            renderFlatList(item, index, checkedInPersonsList)
          }
          //   onScroll={onScroll}
          onViewableItemsChanged={onViewableItemsChanged}
          viewabilityConfig={{
            itemVisiblePercentThreshold: 92,
          }}
          ItemSeparatorComponent={() => (
            <View style={{ paddingHorizontal: 10 }} />
          )}
          testID={'PaxScrollerFlatList.test'}
        />
      </View>
    </View>
  )

app.test.js

import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import PaxScroller from './index';

describe('Pax Scroller', () => {
  test('Scroll Flatlist Horizontal', () => {
    const { getAllByTestId, getByTestId } = render(
      <PaxScroller checkedInPersonsList={list} />,
    );
    
    let fList = getByTestId('PaxScrollerFlatList.test');
    fireEvent.scroll(fList, {
      nativeEvent: {
        contentSize: { height: 600, width: 600 },
        contentOffset: { y: 0, x: 0 },
        layoutMeasurement: { height: 100, width: 400 },
      },
    });
  });
}

在执行测试用例之后,我可以在测试覆盖率中看到onViewableItemsChanged被调用,但是内部语句没有被执行。有没有一种方法可以执行这些用红色突出显示的语句?

请帮我执行内部声明。

njthzxwz

njthzxwz1#

我相信,如果你想在FlatList中触发onViewableItemsChanged的处理程序,你必须:

  • 使用fireEvent.scroll模拟滚动事件
  • 传递布局尺寸数据

比如:

const eventData = {
  nativeEvent: {
    contentOffset: {
      y: 500,
    },
    contentSize: {
      // Dimensions of the scrollable content
      height: 500,
      width: 100,
    },
    layoutMeasurement: {
      // Dimensions of the device
      height: 100,
      width: 100,
    },
  },
};

fireEvent.scroll(screen.getByTestId('flat-list'), eventData);

看看这些文档。
这可能是端到端测试更适合的情况。

相关问题