CODEWITHSUNDEEP
reactjsreact-nativejestjsenzymereact-hooks
Jaro
Jaro

Reputation: 1687

Testing onChange event with Jest

According to my code coverage, I need to test the function called in my onChange event. This is actually where I update my functional component's state using the useState hook.

Here is my component : 

const Component:React.FC<{}> = () => {
  const {value, setState} = useState('');
  return(
    <View>
      <CustomComponent 
        onChange={(value) => setState(value)}
      />
    </View>
  )
}

The customComponent is a component derived from the React Input component. When text is changed inside of it, it calls the onChange function passed as its prop with the text. This is how it comes up to the parent Component which sets the value of the text input in its state as displayed above.

My code coverage returns this analysis :

onChange={//(value) => setState(value)//}

Where the code between the // has to be covered. I don't really understand how I can cover this. First thought was use mock functions, but I can't seem to find how to mock it to the onChange event since I don't pass anything as prop to the main Component.

Upvotes: 3

Views: 17147

Answers (1)

Jaro
Jaro

Reputation: 1687

After a few tests, I finally understood that the coverage wasn't asking for the actual test of the onChange function but actually the value that is evaluated. Therefore, here is what I am doing:

  1. Fetching the TextInput Child component
  2. Changing its Text
  3. Evaluating what it renders

I am using @testing-library/react-native here because it makes selecting tree components easier with the use of accessibilityLabel for example (It actually made me understand the importance of that prop).
Here is what a test looks like:

describe('Testing useState functions', () => {
    test('test', () => {
      //Rendering the component and its tree
      const { container, getByLabelText } = render(<SignupView />);
      //Extracting the child, username_input component with his accessibilityLabel
      const username_input = getByLabelText('username_input');
      const email_input = getByLabelText('email_input');
      //Fire a native changeText event with a specific value
      fireEvent.changeText(username_input, 'doe');
      fireEvent.changeText(email_input, '[email protected]');
      //Checking the rendered value 
      expect(username_input.props.value).toEqual('doe');
      expect(email_input.props.value).toEqual('[email protected]');
    });
  });

Upvotes: 3

Related Questions