Testing library environment does not call ref.current.focus()

[24dlong]

Describe the bug

A component in my app focuses a TextInput after a parent Pressable receives a press. I'm using a ref to identify and focus the TextInput element. My desired functionality works just fine when running my app through expo, but my test is failing because it seems that the onFocus event is not being called.

Expected behavior

When Pressable is pressed via fireEvent, I would expect inputElement.current.focus() to successfully run, triggering the onFocus mock event.

Steps to Reproduce

Here's some example code:

Foo.js

import {Pressable, TextInput} from "react-native";
import {useRef} from "react";

const Foo = (props) => {
    const inputRef = useRef()

    return (
        <Pressable testID={"pressable"} onPress={() => inputRef.current.focus()}>
            <TextInput ref={inputRef} testID={"input"} onFocus={props.onFocus} />
        </Pressable>
    )
}

export default Foo;

Foo.test.js

import { render, screen, fireEvent } from '@testing-library/react-native';
import Foo from "./foo";

test('onFocus is called after press', () => {
    const mockFocus = jest.fn();
    render(<Foo onFocus={mockFocus} />)
    fireEvent.press(screen.getByTestId("pressable"));
    expect(mockFocus).toHaveBeenCalled()
});

When I run npm test, this test fails with the following message:

Error: expect(jest.fn()).toHaveBeenCalled()

Expected number of calls: >= 1
Received number of calls:    0

Versions

npmPackages:
   @testing-library/react-native: ^11.0.0 => 11.0.0 
   react: ^17.0.2 => 17.0.2 
   react-native: ^0.68.3 => 0.68.3 
   react-test-renderer: ^17.0.2 => 17.0.2 

[mdjastrzebski]

@24dlong this is expected as React Test Renderer which we use for rendering does not support refs. Check #1006 for more details.

Since the behaviour of focus() triggering onFocus event would probably involve roundtrip to native side (from JS side), then you actually cannot test such behaviour using RNTL as we do run native code (see here for details).

That leaves you with following options:

1. Call fireEvent.focus to manually trigger onFocus on relevant TextInput. Recommended in case focus assertion would be a part of a step in a bigger test.
2. Use createNodeMock to pass ref creating function to render method, More details here. Recommended in case you just want to assert pressing button triggers onFocus.

[24dlong]

Thanks for the background and for the workarounds @mdjastrzebski. Super helpful

[EvgeniyaGorobets]

Hello, I'm having the same issue. From what I can tell, fireEvent.focus() isn't a function anymore (I'm using v12.1.2). Are there any other workarounds I can use?

[mdjastrzebski]

@EvgeniyaGorobets you can invoke any event handler using fireEvent(element, "focus", ...) API.