I'm currently running some tests for a project I'm working on, and am having trouble using fireEvent.select() as a way to focus on an input field.

My test so far:

it('is not working :(', () => {
  const input = queryByPlaceholderText('blah');

  fireEvent.change(input, {
    target: {value: 'some text'},
  });

  expect(input).toHaveAttribute('value', 'some text');

  fireEvent.select(input); <-- issue here
});

The ponent I am testing has a dropdown menu that is only exposed when the input is focused on, but it seems like neither fireEvent.change() nor fireEvent.select() are focusing on the field. I know that fireEvent.change() changes the input value.

So far, I have tried:

• fireEvent.click()
• fireEvent.focus()
• fireEvent.select()
• input.focus()

but none of those options worked.

I need to be able to select an option in this dropdown menu to be able to properly test the ponent.

TL;DR

Is there a way to focus on an input field with RTL?

I'm currently running some tests for a project I'm working on, and am having trouble using fireEvent.select() as a way to focus on an input field.

My test so far:

it('is not working :(', () => {
  const input = queryByPlaceholderText('blah');

  fireEvent.change(input, {
    target: {value: 'some text'},
  });

  expect(input).toHaveAttribute('value', 'some text');

  fireEvent.select(input); <-- issue here
});

The ponent I am testing has a dropdown menu that is only exposed when the input is focused on, but it seems like neither fireEvent.change() nor fireEvent.select() are focusing on the field. I know that fireEvent.change() changes the input value.

So far, I have tried:

• fireEvent.click()
• fireEvent.focus()
• fireEvent.select()
• input.focus()

but none of those options worked.

I need to be able to select an option in this dropdown menu to be able to properly test the ponent.

TL;DR

Is there a way to focus on an input field with RTL?

• javascript
• reactjs
• jestjs
• react-testing-library

• Did you try using fireEvent.click() ? – Sushanth -- Commented Nov 14, 2018 at 17:27
• Yes, that would have been good to mention. I'll add it to my original post. So far I have tried fireEvent.click(), input.focus(), and fireEvent.focus(), none of which have worked. – Zach Commented Nov 14, 2018 at 20:39
• 2 Can you put a minimum reproducible example on codesandbox? – Gio Polvara Commented Nov 15, 2018 at 8:02
• 1 @Zach - did you get this to work? I'm struggling with a similar issue right now using React-Select. – thejohnbackes Commented Feb 5, 2019 at 17:52
• 1 @ChristianSaiki I added an answer below – thejohnbackes Commented May 21, 2020 at 18:38

1 Answer 1

In order to get this to work with React-Select, I had to use ReactDOM instead of fireEvent. Then I could test/run assertions with react-testing-library as normal.

import ReactDOM from 'react-dom';
import TestUtils from 'react-dom/test-utils';

export const openDropdown = ($container) => {
  // Opens the dropdown
  // eslint-disable-next-line react/no-find-dom-node
  selectOption(ReactDOM.findDOMNode($container).querySelector('.Select-arrow'));
};

export const selectOption = ($container) => {
  // Selects an option from the dropdown
  TestUtils.Simulate.mouseDown($container, { button: 0 });
};

    const $fooSelect = await waitForElement(() => app.getByTestId('foo-select'));
    openDropdown($fooSelect);
    const $fooElement = await waitForElement(() => app.getByText(fooFixture[0].name));

    selectOption($fooElement);

    await wait()
    // do stuff...