I have following context
Home.tsx
export const ThemeContext = React.createContext(null)const Home = () => { const { width } = Dimensions.get("window") const [theme, setTheme] = React.useState({ active: 0, heightOfScrollView: 0, profileWidth: width * 0.2, scrolledByTouchingProfile: false }) const horizontalScrollRef = React.useRef<ScrollView>() const verticalScrollRef = React.useRef<ScrollView>() return (<><SafeAreaView style={styles.safeAreaContainer} /><Header title="Contacts" /><ThemeContext.Provider value={{ theme, setTheme }}>
In component A, I have a button which changes in the context
const onProfileTouched = (index: number) => { setTheme({ ...theme, active: index });};
This leads to an image being active
const ImageCircle = ({ active, uri }: Props) => { return (<View style={ active ? { ...styles.parentView, ...styles.active } : { ...styles.parentView } }><Image source={uri} width={30} height={30} /></View> );};
Now, I want to write a test case (I haven't written a test case before) that confirms that the state has actually changed or perhaps an active border is added to the image
I added a testId to my button which I used to fire an event
it('changes active on profile clicked', () => { const { getByTestId } = render(<Home />); fireEvent.press(getByTestId('HScroll3.button'));});
Now, I am unsure, how to grab the value of context or change in style so as I can confirm that indeed the component for which the button is pressed is active
I am using import {render, fireEvent} from '@testing-library/react-native'
but open to change.