Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

React Native check context value on click test case

$
0
0

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.


Viewing all articles
Browse latest Browse all 6287

Trending Articles