Need to execute openMenu() before being able to select() an item

[martenmatrix]

Problem

I'm unable to select an option when I'm not running selectEvent.openMenu() before I select the item with selectEvent.select(), otherwise I'll get the following error message: Unable to find an element with the text: test display name 1. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

I believe this is not expected behavior, as the examples in the documentation also do not do this.

Dependencies

• "@testing-library/jest-dom": "^5.16.4"
• "@testing-library/react": "^13.2.0"
• "react-select": "^5.3.2"
• "react-select-event": "^5.5.0"

Code

test('able to select an item', async () => {
    const mockFunction = jest.fn();

    const fakeOptions = [
        {
            value: 'test-id',
            label: 'test display name 1',
        },
        {
            value: 'test',
            label: 'test display name 2',
        }
    ];

    render(
            <form>
                <label htmlFor="characters">Characters</label>
                <Select inputId="characters" options={fakeOptions} onChange={mockFunction}/>);
            </form>
    ) 

    const select = screen.getByLabelText('Characters');
    
    // if you comment the following line out, the test will not pass anymore
    selectEvent.openMenu(screen.getByLabelText('Characters'));

    await selectEvent.select(select, 'test display name 1');
    expect(mockFunction).toHaveBeenCalledWith('test-id');
});

[RyKilleen]

Also experiencing this issue.

~I believe it might be due to code being 40 instead of ArrowDown in the following code:~

Edit:

Scratch that. After some investigation it appears that the select does open. I believe there's a failure in selecting the react-select container, because a manual findAllByText on my storybook canvas returns the appropriate element. Investigating a little further

[panathea]

I had this problem, turns out it was because I was using menuPortalTarget={document.body} which caused the menu items to show up in the DOM where the library wasn't expecting.

Removing this option, or disabling it during unit testing, fixes the issue for me.

[ebrooks42]

Per @morinted's comment, I was able to resolved this issue in my tests by adding the following to my custom component:

/*
In tests, setting the menuPortalTarget causes issues for
react-testing-library (which can't find the rendered element), so we disable
it.
*/
const actualMenuPortalTarget =
    process.env.NODE_ENV === "test" ? undefined : menuPortalTarget;
// ... other stuff removed for clarity
return (
  <Select 
      menuPortalTarget={actualMenuPortalTarget}
  />
);

Ugly, but effective.