React Native Unit Test not able to interact with component
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 undefined
fireEvent.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!
Solution 1:
For anyone who finds this question in the future, I found out the issue with this. I was trying to use import {render, screen} from '@testing-library/react' when I should have kept everything to the @testing-library/react-native' package, because that's where the stuff from the component is generated. Having these two packages be so similar is stupid.