How to interact with checkbox in jest test?

[JanithaR]

I am testing with react-native-testing-library and would like to interact with a couple of checkboxes I have in one of my components.

Using fireEvent.press(getByA11yLabel('Drivers bag')); would throw error

No handler function found for event: "press"

I tried calling the onValueChange() like so getByA11yLabel('Drivers bag').props.onValueChange(); and that would throw error

TypeError: Cannot read property 'nativeEvent' of undefined

All I'm interested in testing is whether an effect would run when the user toggles the checkbox.

[nicholaslee119]

https://github.com/react-native-community/react-native-checkbox/blob/223e604f4fbe1abd57a476d743d294f6de82a38a/example/AppFunction.tsx#L25-L86

There are some examples to show how to change the value of checkbox outside. Please feel free to let us know if you have any trouble in the test of checkbox

[Selfmade-RuLeZ]

do you still need a better implementation as a new Button just for testing? This is how I solved it:

it('performs onValueChange', () => {
  const func = jest.fn();
  const {getByTestId} = render(
    <CheckBox onValueChange={func} testID="myTest" />,
  );
  const checkBox = getByTestId('myTest');
  fireEvent(checkBox, 'onValueChange', {nativeEvent: {}});
  expect(func).toBeCalledTimes(1);
});


it('changes value', () => {
  let checked = false;
  const {getByTestId} = render(
    <CheckBox
      value={checked}
      onValueChange={() => (checked = !checked)}
      testID="myTest"
    />,
  );
  const checkBox = getByTestId('myTest');
  expect(checked).toBeFalsy();
  fireEvent(checkBox, 'onValueChange', {nativeEvent: {}});
  expect(checked).toBeTruthy();
});

The last one is not that much beauty, maybe someone can beautify it a little bit 👍

Edit: Realized it with @testing-library/react-native

[JanithaR]

I went ahead with wrapping the checkbox label with a TouchableOpacity and testing the onPress callback on that.

[echase03]

Had a similar issue, ended up using this to toggle the checkbox:

fireEvent(getByRole('checkbox'), 'onValueChange', true)

Just wanted to add this in case it helps anybody else!

[anabeatrizzz]

Had a similar issue, ended up using this to toggle the checkbox:

fireEvent(getByRole('checkbox'), 'onValueChange', true)

Just wanted to add this in case it helps anybody else!

Thanks @echase03!

I would like to add also that in my case, I needed to add an await

const checkbox = await findByRole('checkbox');
fireEvent(checkbox, 'onValueChange', true);