How to interact with checkbox in jest test? about react-native-checkbox HOT 5 CLOSED

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

from react-native-checkbox.

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!

from react-native-checkbox.

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

from react-native-checkbox.

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

from react-native-checkbox.

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);

from react-native-checkbox.