Issue with testing MenuList with custom renderers - "getStyles" is not a function

[EfstathiadisD]

I have a little bit of a problem. I am trying to test a custom Select with the MenuList component from react-select. But I get this error:

Error: Uncaught [TypeError: getStyles is not a function]

The error occurs, in this Line:

selectEvent.openMenu(getByLabelText(INPUT_ID)); // When trying to execute the openMenu, or any other method, on the SelectEvent

---

The Test:

/* eslint-disable react/display-name */
import React from 'react';
import Select from 'react-select';
import selectEvent from 'react-select-event';
import '@testing-library/jest-dom/extend-expect';

import renderWithRouter from '../testing/renderWithRouter';
import MenuList from './index';

const FORM = 'form';
const INPUT_ID = 'SELECT_TEST_COMPONENT';
const ROUTE = '/route';
const AD_FUNCTION = jest.fn();

describe('Component: MenuList', () => {
  it('should RENDER all options if props [prop1, prop2] are true', () => {
    const { getByText, getByLabelText } = renderWithRouter(
      <form role={FORM}>
        <label htmlFor={INPUT_ID}>{INPUT_ID}</label>
        <Select
          name={INPUT_ID}
          inputId={INPUT_ID}
          options={[{ label: 'Option1', value: 'Option1' }]}
          components={{
            MenuList: (menuProps) => (
              <MenuList
                {...menuProps}
                getStyles={jest.fn()}
                prop1
                prop2
                propFn={AD_FUNCTION}
              />
            ),
          }}
        />
      </form>,
      ROUTE
    );

    selectEvent.openMenu(getByLabelText(INPUT_ID));

    expect(getByText('Custom Option')).toBeInTheDocument();
    expect(getByText('+ Create')).toBeInTheDocument();
  });
});

---

Can you tell me how can I get rid of this error? My component is working correctly, but I would really like to write some Unit Tests for it.

NOTE, that if I remove the MenuList part everything works fine. So, the problem, is what I pass to MenuList probably, but have no idea what that should be. As I tried undefined, jest.fn(), Response based on the Typings but nothing. Thank you!

[romgain]

Hi @EfstathiadisD !

This seems to be an issue with react-select rather than react-select-event?

If not, would you be able to PR a small failing unit test that reproduces your issue?

[EfstathiadisD]

The problem was how we structured our React Select in our code base.It is all fixed now. Thanks for your time..