How to use the @testing-library/react.fireEvent.focus function in @testing-library/react

['organizations', 'persons', 'subjects'].forEach((kind) =>
      fetchMock.get(`begin:/api/v1.0/${kind}/autocomplete/?query=`, []),
    );

    const { getByPlaceholderText } = render(
      
        
          
        
      ,
    );

    const field = getByPlaceholderText(
      'Search for courses, organizations, categories',
    );
    fireEvent.focus(field);

    // NB: the tests below rely on the very crude debounce mock for lodash-debounce.
    // TODO: rewrite them when we use mocked timers to test our debouncing strategy.
    fireEvent.change(field, { target: { value: 'ri' } });
    await wait();
    expect(history.pushState).not.toHaveBeenCalled();

    fireEvent.change(field, { target: { value: 'ric' } });
    await wait();
    expect(history.pushState).toHaveBeenCalledTimes(1);
    expect(history.pushState).toHaveBeenLastCalledWith(
      {
        name: 'courseSearch',
        data: {
          lastDispatchActions: expect.any(Array),
          params: { limit: '13', offset: '0', query: 'ric' },

it('should expose fire event helpers', () => {
    fireEvent.copy(htmlEl);
    fireEvent.cut(htmlEl);
    fireEvent.paste(htmlEl);
    fireEvent.compositionEnd(htmlEl);
    fireEvent.compositionStart(htmlEl);
    fireEvent.compositionUpdate(htmlEl);
    fireEvent.keyDown(htmlEl);
    fireEvent.keyPress(htmlEl);
    fireEvent.keyUp(htmlEl);
    fireEvent.focus(htmlEl);
    fireEvent.blur(htmlEl);
    fireEvent.change(htmlEl);
    fireEvent.input(htmlEl);
    fireEvent.invalid(htmlEl);
    fireEvent.submit(htmlEl);
    fireEvent.click(htmlEl);
    fireEvent.contextMenu(htmlEl);
    fireEvent.dblClick(htmlEl);
    fireEvent.doubleClick(htmlEl);
    fireEvent.drag(htmlEl);
    fireEvent.dragEnd(htmlEl);
    fireEvent.dragEnter(htmlEl);
    fireEvent.dragExit(htmlEl);
    fireEvent.dragLeave(htmlEl);
    fireEvent.dragOver(htmlEl);
    fireEvent.dragStart(htmlEl);

it('should call onChange with correct selectedItem', () => {
    const field = fromJS({ options });
    const { getByText, input, onChangeSpy } = setup({ field });

    fireEvent.focus(input);
    fireEvent.keyDown(input, { key: 'ArrowDown' });
    fireEvent.click(getByText('Foo'));

    expect(onChangeSpy).toHaveBeenCalledTimes(1);
    expect(onChangeSpy).toHaveBeenCalledWith(options[0].value);
  });

beforeEach(() => {
    ({container, queryByText} = render(
      
        {Trigger}
      
    ));
    fireEvent.focus(container.firstChild as HTMLElement);
    jest.runAllTimers();
  });

it('does not apply focus-visible to input with invalid type', () => {
      const { getByTestId } = render(
        
          <input type="invalid-type" data-test-id="input">
        
      );

      const input = getByTestId('input');

      fireEvent.focus(input);

      expect(input).not.toHaveAttribute('data-garden-focus-visible');
    });

it('should render app for new project', async () => {
    const rendered = renderApp(
      <label id="project-switcher">{'Project switcher'}</label>
    );
    const nextProject = operations.FetchLoggedInUser.me.projects.results[1];
    await waitForElement(() =&gt; rendered.getByText('Project switcher'));
    const input = await waitForElement(() =&gt;
      rendered.getByLabelText('Project switcher')
    );
    fireEvent.focus(input);
    fireEvent.keyDown(input, { key: 'ArrowDown' });
    rendered.getByText(nextProject.name).click();
    await wait(() =&gt; {
      expect(window.location.replace).toHaveBeenCalledWith(
        `/${nextProject.key}`
      );
    });
  });
});

it('retains focus treatment if focused multiple times', () => {
      const { getByTestId } = render();
      const button = getByTestId('button');

      fireEvent.keyDown(button);
      fireEvent.focus(button);
      fireEvent.focus(button);

      expect(button).toHaveAttribute('data-garden-focus-visible');
    });

it('does not apply focus-visible otherwise', () => {
      const { getByTestId } = render(
        
          <div tabindex="{-1}" data-test-id="content"></div>
        
      );

      const content = getByTestId('content');

      fireEvent.focus(content);

      expect(content).not.toHaveAttribute('data-garden-focus-visible');
    });
  });

it('should be displayed if field has been touched and is invalid', () => {
            const { getByLabelText, queryByText } = render(
                <form> (
                        
                    )}
                /&gt;
            );
            const input = getByLabelText('resources.users.fields.role');
            fireEvent.focus(input);
            fireEvent.blur(input);

            expect(queryByText('ra.validation.error')).not.toBeNull();
        });
    });</form>

alias: 'google'
          },
          {
            longLink: 'https://github.com/short-d/short/',
            alias: 'short'
          }
        ]}
      />
    );

    const input = getByPlaceholderText(
      'Search short links'
    ) as HTMLInputElement;

    expect(container.querySelector('.suggestions.show')).toBeFalsy();
    fireEvent.focus(input);
    expect(container.querySelector('.suggestions.show')).toBeTruthy();
  });