Testing select with @testing-library/react'

[StianIsmar]

I am using the rc-select and would like to add some tests to mye code.

I found a solution on stackoverflow using @testing-library/react'.

However, the second test- it('should call onChange when the first option is selected', async () => { , I cannot get to work.

I get the error:

   Error: Unable to find an element with the text: Mocked option 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 tried changing out waitFor with waitForElement.

Code (from Stack overflow)

import React from 'react';
import { render, fireEvent, cleanup, waitForElement } from '@testing-library/react';
import MySelectComponent from './MySelectComponent';

afterEach(cleanup);

describe ('Test react-select component', () => {

    const mockedOptions = [
        {label: 'Mocked option 1', value: 'mocked-option-1'},
        {label: 'Mocked option 2', value: 'mocked-option-2'},
        {label: 'Mocked option 3', value: 'mocked-option-3'},
        {label: 'Mocked option 4', value: 'mocked-option-4'},
        {label: 'Mocked option 5', value: 'mocked-option-5'},
        {label: 'Mocked option 6', value: 'mocked-option-6'},
        {label: 'Mocked option 7', value: 'mocked-option-7'},
        {label: 'Mocked option 8', value: 'mocked-option-8'},
        {label: 'Mocked option 9', value: 'mocked-option-9'},
        {label: 'Mocked option 10', value: 'mocked-option-10'},
    ];

    it('should render without errors', async () => {
        const mockedOnChange = jest.fn();
        const { getByText } = render(<MySelectComponent 
            options={mockedOptions} 
            onChange={mockedOnChange} />);

        const placeholder = getByText('Select an option');

        expect(placeholder).toBeTruthy();
    });

    it('should call onChange when the first option is selected', async () => {
        const mockedOnChange = jest.fn();
        const { getByText, queryByTestId } = render(<MySelectComponent 
            options={mockedOptions} 
            onChange={mockedOnChange} />);

        const mySelectComponent = queryByTestId('my-select-component');

        expect(mySelectComponent).toBeDefined();
        expect(mySelectComponent).not.toBeNull();
        expect(mockedOnChange).toHaveBeenCalledTimes(0);

        fireEvent.keyDown(mySelectComponent.firstChild, { key: 'ArrowDown' });
        await waitForElement(() => getByText('Mocked option 1'));
        fireEvent.click(getByText('Mocked option 1'));

        expect(mockedOnChange).toHaveBeenCalledTimes(1);
        expect(mockedOnChange).toHaveBeenCalledWith({label: 'Mocked option 1', value: 'mocked-option-1'});

    });

  
});

https://stackoverflow.com/questions/41991077/testing-react-select-component

[linchen2chris]

met the same problem as well, here is my solution, not perfect, but works.
component

export default function AntSelect({ onChange }) {
  return (
    <Select data-testid="select" style={{ width: 120 }} onChange={onChange}>
      <Option title="Lucy" data-testid="Lucy" value="Lucy">
        Lucy
      </Option>
      <Option title="Jack" data-testid="Jack" value="Jack">
        Jack
      </Option>
    </Select>
  );
}

  it("should select options correctly", async () => {
    const changeSpy = jest.fn();
    const {
      queryAllByTestId,
      getByText,
      getByRole,
      getByTestId,
    } = render(<App onChange={changeSpy} />);

    expect(queryAllByTestId("Jack").length).toBe(0);
    expect(queryAllByTestId("Lucy").length).toBe(0);
    await act(async () => {
      await fireEvent.mouseDown(getByRole('combobox'));
      await fireEvent.click(getByText('Jack'));
    });
    expect(changeSpy).toHaveBeenCalledWith('Jack', expect.anything());
  });