#StackBounty: #javascript #reactjs #typescript #react-native React Native check context value on click test case

Bounty: 200

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.


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.