【问题标题】：React Native Unit Test not able to interact with componentReact Native Unit Test 无法与组件交互
【发布时间】：2022-01-10 20:02:45
【问题描述】：

我试图弄清楚如何设置用户与 react 原生组件的交互，但似乎没有任何效果。代码如下：

PriceDetails.tsx

这是组件文件的返回语句。它基本上是一个带有一些样式的文本框。重要的部分是第一个 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 时，它是未定义的，所以这对我来说真的没有意义。提前感谢您的任何建议！

【问题讨论】：

标签： javascript reactjs typescript react-native unit-testing

【解决方案1】：

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

【讨论】：