React Native测试报错：无法找到testID为gigs-today-card的元素

问题 #

开发React Native应用时，GigsByDay组件内的TouchableOpacity点击后会跳转到GigDetails页面，但用Jest+React Native Testing Library测试该功能时，始终报错：

Unable to find an element with testID: gigs-today-card

尝试过用waitFor等待元素加载、将testID移到内部View都未解决。

根本原因 #

查看GigsByDay组件代码可知，FlatList的数据源是gigsFromSelectedDate props，但测试代码中没有传入该数据，导致FlatList没有渲染任何子项，自然找不到带有gigs-today-card testID的元素。

修复方案 #

1. 构造测试用模拟数据 #

先定义符合GigObject类型的测试数据，确保FlatList能渲染出子项：

const mockGigs: GigObject[] = [
  {
    id: '1',
    venue: 'Test Venue',
    gigName: 'Test Gig',
    blurb: 'Test Blurb',
    isFree: false,
    image: '',
    genre: 'Rock',
    dateAndTime: { start: new Date(), end: new Date() },
    tickets: []
  }
];

2. 修改测试代码，传入模拟数据 #

在渲染GigsByDay时，将模拟数据作为gigsFromSelectedDate props传入：

describe("gigs by week component", () => {
  let navigation;
  const mockGigs: GigObject[] = [
    {
      id: '1',
      venue: 'Test Venue',
      gigName: 'Test Gig',
      blurb: 'Test Blurb',
      isFree: false,
      image: '',
      genre: 'Rock',
      dateAndTime: { start: new Date(), end: new Date() },
      tickets: []
    }
  ];

  beforeEach(() => {
    navigation = { navigate: jest.fn() };
  });

  test("pressing gig listing redirects to Gig Details page", () => {
    render(<GigsByDay navigation={navigation} gigsFromSelectedDate={mockGigs} />);
    
    const gigCard = screen.getByTestId("gigs-today-card");
    fireEvent.press(gigCard);
    
    // 验证跳转触发
    expect(navigation.navigate).toHaveBeenCalledWith("GigDetails", expect.any(Object));
    // 可选：验证跳转参数是否匹配
    expect(navigation.navigate).toHaveBeenCalledWith("GigDetails", {
      venue: 'Test Venue',
      gigName: 'Test Gig',
      blurb: 'Test Blurb',
      isFree: false,
      image: '',
      genre: 'Rock',
      dateAndTime: expect.any(Object),
      tickets: [],
      id: '1'
    });
  });
});

3. （可选）优化testID唯一性 #

如果FlatList会渲染多个卡片，建议给每个卡片的testID加上唯一标识（比如item.id），避免多个元素使用同一个testID导致测试混淆：

<TouchableOpacity
  testID={`gigs-today-card-${item.id}`}
  style={styles.gigCard}
  onPress={() => /* 跳转逻辑 */}>
  {/* ... 其他元素 */}
</TouchableOpacity>

对应的测试代码中，改为查找带唯一标识的testID：

const gigCard = screen.getByTestId("gigs-today-card-1");

内容的提问来源于stack exchange，提问作者Josh Simon