react-select-event icon indicating copy to clipboard operation
react-select-event copied to clipboard

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

Open martenmatrix opened this issue 2 years ago • 3 comments

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');
});

martenmatrix avatar May 29 '22 22:05 martenmatrix