issue: setFocus is not working with @testing-library/react-native

[saadi-ninjasCode]

Version Number

7.49.3

Codesandbox/Expo snack

facing issue on Expo Snack : jest installation fialed.

Steps to reproduce

Component

import { render, screen, userEvent } from '@testing-library/react-native';
import React from 'react';
import { useController, useForm } from 'react-hook-form';
import { Button, TextInput, View } from 'react-native';

const MyTextInput = () => {
  const { control, setFocus } = useForm();
  const {
    field: { ref, ...inputProps },
  } = useController({
    name: 'email',
    control: control,
  });

  return (
    <View>
      <TextInput ref={ref} onFocus={() => console.log('Focused')} {...inputProps} />
      <Button testID="focus-btn" title="Focus Input" onPress={() => setFocus('email')} />
    </View>
  );
};

Test Case

describe('Test Focus', () => {
  it('should focus input', async () => {
    const event = userEvent.setup();
    render(<MyTextInput />);

    const btnWrapper = screen.getByTestId('focus-btn');
    expect(btnWrapper).toHaveTextContent('Focus Input');
    // fireEvent.press(btnWrapper);
    await event.press(btnWrapper);
  });
});

Expected behaviour

setFocus will focus on input.
In above example,
onFocus={() => console.log('Focused')} should be called. when testing await event.press(btnWrapper)

What browsers are you seeing the problem on?

No response

Relevant log output

The test is passed without focusing on the input.

Code of Conduct

• I agree to follow this project's Code of Conduct

[bluebill1049]

hook form will call ref.focus(), if it's not been register correctly then it won't work.

[saadi-ninjasCode]

@bluebill1049 , it's registered correctly. as validation (error messages, rules, etc) is working and tested successfully.

[bsides]

I can confirm this is happening. Tested with Jest, React Testing Library and React Hook Forms. I can check if it's selected (shouldSelect: true) with the matches below. Since it's React Hook Forms that is doing that, I'll just believe it's enough but I also think it should pass regardless. Something is getting in the way of this.

// won't work
expect(theInput).toHaveFocus();

// works
expect((theInput as HTMLInputElement).selectionStart).toBe(0);
expect((theInput as HTMLInputElement).selectionEnd).toBe(code.length);

If I had to guess, I think the form is resetted after submitting and it's causing the button type="button" to be focused again, only in node.