I'm trying to figure out how to setup user interaction with a react native component, but nothing seems to be working. Here's the code:
PriceDetails.tsx
This is the return statement from the component file. It's basically a text box with some styling. The important part is the first View tag, which has the data-testid="press" tag, and the Pressable tag which contains the function pressActions. This part all works when testing it out in the emulator. When I click on this component, pressActions does indeed get run, so this issue has to do with testing.
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
This is just a basic test to help me understand how the interaction works for the test files. screen.getByTestId('press') is supposed to locate the element where the testid field is labeled 'press', which is the View tag from above
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')); });The main error that I get is this one:
TypeError: Cannot read property 'onPress' of undefinedfireEvent.press(screen.getByTestId('press')); ^So to my understanding, it is able to locate the component when getByTestId is called, but when fireEvent.press is used on that, it's undefined, so that doesn't really make sense to me. Thanks in advance for any advice!