React testing library - function not being called on dropdown select

Question

I have a dropdown menu from ant design in my react component (consoliated code below, only showing relevant details): `


                <Select
                  data-testid="addCompany"
                  showSearch
                  style={{ width: '100%' }}
                  onChange={(value) =>
                    onAddCompanySelectHandler(periodIndex, value)
                  }
                  placeholder="Add Company"
                  value={companyDropdownValue}
                  options={companyDropdownList}
                />

`

This is my test that renders component with dropdown and mocked comanies passed to it as props: `

const companyDropdownList = companies; //got this from the mock data

describe('Test BaselineItemDetailsEdit component', () => {
  const onAddCompanySelectHandler = jest.fn();

  const editProps = {
    companyDropdownList,
    onAddCompanySelectHandler
 };

it.only('calls add Company from dropdown', async () => {
  render(<Component {...props} />);
  const company = screen.getByText('Company Name');
  userEvent.click(company);
  expect(onAddCompanySelectHandler).toBeCalled();
});

` I seem to be able to find the company from the dropdown but when click on it function is not being called. I have other regular buttons in this components and test that do call mocked functions though.

`

  ● Test ItemDetails component › calls add Company from dropdown

    expect(jest.fn()).toBeCalled()

    Expected number of calls: >= 1
    Received number of calls:    0

       95 |     const company = screen.getByText('Company Name');
       96 |     userEvent.click(company);
    >  97 |     expect(onAddCompanySelectHandler).toBeCalled();
          |                                       ^
       98 |   });
       99 | });
      100 |

`

I've tried to call mocked function and expected it to be called.

This may help you:stackoverflow.com/questions/55184037/… Material UI is painful to test... — Letincel
– Letincel, Commented Dec 16, 2022 at 16:43

Jax · Accepted Answer · 2022-12-21 18:51:29Z

0

This is how I ended up testing it. Need to get combobox item first with and dropdown:

it('calls Company from dropdown', async () => {
  userEvent.click(screen.getByTestId('toExpand'));
  userEvent.click(screen.getByRole('combobox'));
  userEvent.click(screen.getByText('CompanyName'));

  expect(onAddCompanySelectHandler).toBeCalledWith(0, 'CompanyName');
});

edited Dec 21, 2022 at 18:51

Jax

1,8373 gold badges18 silver badges30 bronze badges

answered Dec 17, 2022 at 17:40

Mike Bely

196 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React testing library - function not being called on dropdown select

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related