无法找到具有 testID 的元素

Question

我正在构建一个 React Native 应用程序。 在我的GigsByDay组件中，有一个 TouchableOpacity 元素，按下该元素会将用户定向到GigDetails屏幕。 我正在尝试使用 Jest 和 React Native 测试库来测试这个特定的功能。

我编写了以下测试，但收到了错误：

无法找到具有 testID 的元素：gigs-today-card

测试如下：

describe("gigs by week component", () => {
  let navigation;

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

  test("that when gig listing is pressed on it redirects user to Gig Details page", () => {
    render(<GigsByDay navigation={navigation} />);
    const gigCard = screen.getByTestId("gigs-today-card");
    fireEvent.press(gigCard);
    expect(navigation.navigate).toHaveBeenCalledWith("GigDetails");
  });
});

它正在测试的元素如下：

      <TouchableOpacity
        testID="gigs-today-card"
        style={styles.gigCard}
        onPress={() =>
          navigation.navigate('GigDetails', {
            venue: item.venue,
            gigName: item.gigName,
            blurb: item.blurb,
            isFree: item.isFree,
            image: item.image,
            genre: item.genre,
            dateAndTime: {...item.dateAndTime},
            tickets: item.tickets,
            id:item.id
          })
        }>
        <View style={styles.gigCard_items}>
          <Image
            style={styles.gigCard_items_img}
            source={require('../assets/Icon_Gold_48x48.png')}
          />
          <View>
            <Text style={styles.gigCard_header}>{item.gigName}</Text>
            <Text style={styles.gigCard_details}>{item.venue}</Text>
          </View>
        </View>
      </TouchableOpacity>

我试过如下修复我的测试，但没有成功：

  test("that when gig listing is pressed on it redirects user to Gig Details page", async () => {
    render(<GigsByDay navigation={navigation} />);
    await waitFor(() => {
    expect(screen.getByTestId('gigs-today-card')).toBeTruthy()
})
    const gigCard = screen.getByTestId("gigs-today-card");
    fireEvent.press(gigCard);
    expect(navigation.navigate).toHaveBeenCalledWith("GigDetails");
  });
});

对于如何解决这个问题，有任何的建议吗？ 我还尝试将 testID 分配给testID元素中的视图。

对于上下文，这是整个GigsByDay组件：

import { FC } from 'react';
import { FlatList,TouchableOpacity,StyleSheet,View,Image,Text } from 'react-native'
import { listProps } from '../routes/homeStack';
import { GigObject } from '../routes/homeStack';

type ListScreenNavigationProp = listProps['navigation']

interface Props {
  gigsFromSelectedDate: GigObject[],
  navigation: ListScreenNavigationProp
}

const GigsByDay:FC<Props> = ({ gigsFromSelectedDate, navigation }):JSX.Element => (
  <FlatList
    testID='gigs-today'
    data={gigsFromSelectedDate}
    keyExtractor={item => item.id}
    renderItem={({ item }) => (
      <TouchableOpacity
        testID="gigs-today-card"
        style={styles.gigCard}
        onPress={() =>
          navigation.navigate('GigDetails', {
            venue: item.venue,
            gigName: item.gigName,
            blurb: item.blurb,
            isFree: item.isFree,
            image: item.image,
            genre: item.genre,
            dateAndTime: {...item.dateAndTime},
            tickets: item.tickets,
            id:item.id
          })
        }>
        <View style={styles.gigCard_items}>
          <Image
            style={styles.gigCard_items_img}
            source={require('../assets/Icon_Gold_48x48.png')}
          />
          <View>
            <Text style={styles.gigCard_header}>{item.gigName}</Text>
            <Text style={styles.gigCard_details}>{item.venue}</Text>
          </View>
        </View>
      </TouchableOpacity>
    )}
  />
)

Answer 1

请将gigsFromSelectedDate传递给一些模拟数组数据，以便平面列表根据数组长度呈现其元素。 目前，你没有通过它。 请检查下面的代码。

  test('that when gig listing is pressed on it redirects user to Gig Details page', () => {
    const mockData = [{venue: 'some venue', 
                      gigName: 'some gigName, 
                      blurb: 'some blurb',
                      isFree: 'some isFree', 
                      image: 'some image', 
                      genre: 'some genre', 
                      dateAndTime: {}, 
                      tickets: ['some ticket'],
                     id: 'some id'}]
    const screen = render(<GigsByDay navigation={navigation} gigsFromSelectedDate={mockData} />);
    const gigCard = screen.getByTestId('gigs-today-card');
    fireEvent.press(gigCard);
    expect(navigation.navigate).toHaveBeenCalledWith('GigDetails');
  });

Answer 2

package下面安装了吗？ 请检查您的 Package.json

"@testing-library/jest-native": "^5.4.1"

如果没有，请安装它，然后将其导入您编写测试用例的位置。

导入“@testing-library/jest-native/extend-expect”；

如果它已经存在，那么请尝试以下 jest-native 的属性。

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

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