React Native 单元测试无法与组件交互

Question

我正在尝试弄清楚如何设置用户与反应本机组件的交互，但似乎没有任何效果。这是代码：

PriceDetails.tsx

这是组件文件中的 return 语句。它基本上是一个带有一些样式的文本框。重要的部分是第一个 View 标签，其中包含 data-testid="press" 标签，以及包含函数 pressActions 的 Pressable 标签。这部分在模拟器中测试时都有效。当我点击这个组件时，pressActions 确实得到运行，所以这个问题与测试有关。

import React, { useState } from 'react';
import { StyleSheet, Pressable, View } from 'react-native';
.
.
.
    return (
        <Pressable onPress={pressActions}>
          <View data-testid="press" style={[{ ...styles.container, marginTop: index === 0 ? 0 : 8 }, getBorderStyle(isForMultipleSelection)]}>
            <View style={styles.left}>
              <View>
                <Text style={styles.leftprice}>{headerText}</Text>
              </View>
              <View style={styles.dateContainerStyles}>
                <Text style={[styles.dateStyles, styles.secondRowCommon]}>
                  {t('dateFormat', { date: startDateDisplay })}
                </Text>
                <Text style={{ marginLeft: 5, marginRight: 5 }}> - </Text>
                <Text style={[styles.dateStyles, styles.secondRowCommon]}>{endDateDisplay}</Text>
              </View>
              {override && (
                <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', paddingTop: 8 }}>
                  <Text style={styles.storeOverrideText}>{t('common:storeOverride')}</Text>
                </View>
              )}
            </View>
            <View style={styles.right}>
              <View>
                <Text style={styles.rightprice}>
                  {isLoyalty && (
                    <Icon
                      name='loyalty'
                      type='app_icon'
                      color={Colors.primary}
                      style={styles.loyaltyIcon}
                      size={20}
                      tvParallaxProperties={undefined}
                    />
                  )}
                  {priceText}
                </Text>
              </View>
              <View style={styles.itemQuantityContainer}>
                <Text style={styles.secondRowCommon}>{quantityText}</Text>
              </View>
            </View>
          </View>
        </Pressable>
      );
    };

PriceDetails.test.tsx

这只是一个基本测试，可帮助我了解交互如何针对测试文件进行。 screen.getByTestId('press') 应该定位到testid 字段标记为'press' 的元素，也就是上面的View 标签

import { fireEvent } from '@testing-library/react-native';
import {render, screen} from '@testing-library/react'
import React from 'react';
.
.
.
     
it('should respond to press', () => {
   let props: any;
   props = createTestProps({});
   render(<PriceDetails {...props}/>);
        
   fireEvent.press(screen.getByTestId('press'));

        
 });

我得到的主要错误是这个：

TypeError: Cannot read property 'onPress' of undefined
    

fireEvent.press(screen.getByTestId('press'));
          ^

所以据我所知，它能够在调用 getByTestId 时定位组件，但是当在其上使用 fireEvent.press 时，它是未定义的，所以这对我来说真的没有意义。在此先感谢您的任何建议！

Answer 1

对于以后发现这个问题的人，我发现了这个问题。当我应该将所有内容保存到 @testing-library/react-native' 包时，我试图使用 import {render, screen} from '@testing-library/react'，因为这是生成组件内容的地方。让这两个包如此相似是愚蠢的。

React Native 单元测试无法与组件交互

React Native Unit Test not able to interact with component

javascript

unit-testing

typescript

reactjs

react-native

PriceDetails.tsx

PriceDetails.test.tsx