Testing React Select component

Question

https://github.com/JedWatson/react-select

I would like to use React-Select react component, but I need to add tests.

I've tried several options I found with google, but nothing seems to work. I have the code below, but it's not causing a change event. I have been able to add a focus event, which adds 'is-focussed' class, but the 'is-open' class is still missing.

I have used: https://github.com/JedWatson/react-select/blob/master/test/Select-test.js as a reference

I have tried to use a change event only on the input field, but this has not helped either. I noticed there is a onInputChange={this.change} for the select.

Test

import Home from '../../src/components/home';
import { mount } from 'enzyme'

describe('Home', () => {

it("renders home", () => {

    const component = mount(<Home/>);

    // default class on .Select div
    // "Select foobar Select--single is-searchable"

    const select = component.find('.Select');

    // After focus event
    // "Select foobar Select--single is-searchable is-focussed"
    // missing is-open
    TestUtils.Simulate.focus(select.find('input'));

    //this is not working
    TestUtils.Simulate.keyDown(select.find('.Select-control'), { keyCode: 40, key: 'ArrowDown' });
    TestUtils.Simulate.keyDown(select.find('.Select-control'), { keyCode: 13, key: 'Enter' });

    // as per code below I expect the h2 to have the select value in it eg 'feaure'

});
});

Component under test

import React, { Component } from 'react';
import Select from 'react-select';

class Home extends Component {
constructor(props) {
    super(props);

    this.state = {
        message: "Please select option"};
    this.change = this.change.bind(this);
}

change(event) {

    if(event.value) {
        this.setState({message: event.label});
    }
}

render () {

    const options = [ {label: 'bug', value: 1} , {label: 'feature', value: 2 }, {label: 'documents', value: 3}, {label: 'discussion', value: 4}];

    return (
      <div className='content xs-full-height'>
          <div>
              <h2>{this.state.message}</h2>

              <Select
                  name="select"
                  value={this.state.message}
                  options={options}
                  onInputChange={this.change}
                  onChange={this.change}
              />

          </div>
        </div>
    );
}
}

export default Home;

Command line To run test I do:

>> npm run test

and in package.js I have this script:

"test": "mocha --compilers js:babel-core/register -w test/browser.js ./new",

Test setup

and browser.js is:

import 'babel-register';
import jsdom from 'jsdom';

const exposedProperties = ['window', 'navigator', 'document'];

global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.window = document.defaultView;
Object.keys(document.defaultView).forEach((property) => {
   if (typeof global[property] === 'undefined') {
       exposedProperties.push(property);
       global[property] = document.defaultView[property];
   }
});

global.navigator = {
    userAgent: 'node.js'
};

I have also tried using methods for testing outlined here: https://github.com/StephenGrider/ReduxSimpleStarter

Any help will be greatly appreciated

score 38 · Answer 1 · answered May 01 '20 at 22:42

This is a recurrent question. I'm sharing my own code with 100% passing tests which cover 100% of my source code.

My component looks like this

MySelectComponent({ options, onChange }) {

  return <div data-testid="my-select-component">
    <Select
      className="basic-single"
      classNamePrefix="select"
      name="myOptions"
      placeholder="Select an option"
      options={options}
      onChange={e => onChange(e)}
    />
</div>;
}

The reason I'm adding a wrapper on my Select with data-testid="my-select-component" is that the rendered options element will be available on it otherwise I can't check if a text option exist (you'll understand better when you'll see my tests).

This is a live running example and when rendering it'll show a select component with 10 options.

Test 1 : should render without errors

I render the component.
I search for the placeholder to be present.

Test 2 : should call onChange when the first option is selected

I render the component.
I check if my mockedOnChange is not yet called.
Simulate an ArrowDown event.
Click on the first option.
I check if mockedOnChange is called 1 time with the 1st option label and value.

Test 3 : should call onChange when the first option is selected then second option then the 9th one

I render the component.
I simulate a select of the first option.
I simulate a select of the 2nd option.
I simulate a select of the 9th option.
I check if the mockedOnChange is called 3 times with the 9th option bale and value.

Test 4 : should call onChange when filtering by input value

I render the component.
I simulate a change on the input field by typing "option 1".
I know, based on my mockedOptions that the filtered result will be "Mocked option 1" and "Mocked option 10".
I simulate 2 ArrowDown events.
I check that the mockedOnChange is called with the 2nd filtered option with right label and value.

Complete test file

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

    });

    it('should call onChange when the first option is selected then second option then the 9th one', 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'));

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

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

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

    it('should call onChange when filtering by input value', async () => {
      const mockedOnChange = jest.fn();
      const { getByText, queryByTestId, container } = render(<MySelectComponent 
        options={mockedOptions} 
        onChange={mockedOnChange} />);

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

        fireEvent.change(container.querySelector('input'), {
            target: { value: 'option 1' },
        });

        // select Mocked option 1
        fireEvent.keyDown(mySelectComponent.firstChild, { key: 'ArrowDown' });  
        // select Mocked option 10
        fireEvent.keyDown(mySelectComponent.firstChild, { key: 'ArrowDown' });

        await waitForElement(() => getByText('Mocked option 10'));
        fireEvent.click(getByText('Mocked option 10'));

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

});

I hope that this help.

Thanks for your answer, it works very well with `@testing-library/react` and the latest `react-select` versions. However, for anyone who is coming here, it is not recommended to test the `onChange` method (`toHaveBeenCalled`) with mocks. You should instead test it by finding if the option has been selected with `getByText` and `queryByText` methods exposed from `@testing-library/react`. In my case, I make sure that the placeholder is removed: `expect(screen.queryByText('placeholder')).not.toBeInTheDocument()` and replaced by the option: `expect(screen.getByText('opt')).toBeVisible();` — TotomInc, Apr 24 '21 at 16:50

score 25 · Answer 2 · edited Feb 24 '19 at 05:06

25

I've tried both answers listed above, and still no luck.

What did work for me was:

Add classNamePrefix prop - i.e list (as mentioned in the other answers) :

<Select
   classNamePrefix='list'
   options={[
     { label: 'one', value: 'one' },
     { label: 'two', value: 'two' }
]}/>

select the dropdown indicator & simulate a mouseDown => opened dropdown:

wrapper
  .find('.list__dropdown-indicator')
  .simulate('mouseDown', {
    button: 0 
  });

expect things to happen i.e. in my case I was checking for the number of dropdown options
```
expect(wrapper.find('.list__option').length).toEqual(2);
```
if you have control over the props being sent, you can add a menuIsOpen prop to always have the menu open (aka step 2 in the list).

To select a value from the dropdown, after opening the dropdown:

wrapper.find('.list__option').last().simulate('click', null);

then you can test either:

expect(wrapper.find('.list__value-container').text()).toEqual('two');

or

expect(wrapper.find('.list__single-value').text()).toEqual('two');

edited Feb 24 '19 at 05:06

Agney

18,522
7
57
75

answered Oct 24 '18 at 20:40

Sanda

1,357
19
29

Setting `menuIsOpen` prop to true can't be done easily as it alters component behaviour. Instead your solution using `classNamePrefix` worked like a charm! Thank you! – LucioB May 28 '19 at 14:32
This worked but I had to change it to `expect(wrapper.update().find('.list__option').length).toEqual(2);` for it to work correctly – fabian enos Mar 24 '22 at 14:20
might be because you're checking the `.length` , not the `.text()` @fabian-enos ?:) , granted, I should've given better text examples. – Sanda Mar 24 '22 at 15:33
Ah no, I think it is because I was checking for the existence of the `single-value` before and after a selection. I just tried it without the `update()` in a few places but it still seems to need it to find it correctly. – fabian enos Mar 24 '22 at 17:35

score 23 · Answer 3 · answered Sep 13 '17 at 15:34

23

From https://github.com/JedWatson/react-select/issues/1357

Only solution I found was to simulate a selection through key-down events:

wrapper.find('.Select-control').simulate('keyDown', { keyCode: 40 });
// you can use 'input' instead of '.Select-control'
wrapper.find('.Select-control').simulate('keyDown', { keyCode: 13 });
expect(size).to.eql('your first value in the list')

answered Sep 13 '17 at 15:34

Keith

1,123
9
22

2

Important note here is that both of those keyDown simulations are needed to trigger the change event. – Kyle Suss Feb 14 '18 at 17:26

score 13 · Answer 4 · answered Aug 28 '19 at 19:39

13

Using testing-library and v2.0

Trying to avoid using anything very specific like classNamePrefix or hacking into the way the component operates by looking for the onChange prop or whatever.

const callback = jest.fn();
const { container, getByText} = render(<Select ... onChange={callback} />);

Now we basically pretend to be a screen reader and focus, and press the down arrow.

fireEvent.focus(container.querySelector('input'));
fireEvent.keyDown(container.querySelector('input'), { key: 'ArrowDown', code: 40 });

And now click on the value you want

fireEvent.click(getByText('Option Two'));

And assert.

expect(callback).toHaveBeenCalledWith({ value: 'two', label: 'Option Two'});

answered Aug 28 '19 at 19:39

Dmitriy Likhten

5,076
7
36
47

Your solution does open the menu but not click on option two (not clicked at any option. It is just close the menu) @dmitriy – GO VEGAN Oct 11 '19 at 11:12
2

For me it works very well, all they way (option is clicked correctly). However, it's a pity we are forced to do the first part via keyboard events. It feels like we're testing only the a11y aspect, which would be a great additional test case, but not the primary one. However, I guess we can rely on react-select to have proper test coverage itself and safely use this method/workaround. – loopmode Jan 30 '20 at 07:27

Code Ranger · Answer 5 · 2018-10-02T21:41:55.947

To add to what Keith has said, using the simulate method does seem to be the only way to exercise the functionality. However when I tried this in my solution it didn't work - I am using Typescript though so not sure if this has a bearing but I found that it is necessary to also pass the key property when simulating the event:

wrapper.find('.Select-control').simulate('keyDown', { key: 'ArrowDown', keyCode: 40 });
wrapper.find('.Select-control').simulate('keyDown', { key: 'Enter', keyCode: 13 });

I also found that setting the classNamePrefix property made it much easier to do a simple test to give me confidence that the component was responding correctly to the simulated events. When setting this prefix useful parts of the component are decorated with class names providing easy access to them (you can identify these useful class names by inspecting the elements in google dev tools). A simple Jest test:

it('react-select will respond to events correctly', () => {
    const sut = Enzyme.mount(
    <Select 
        classNamePrefix="list" 
        options={[{ label: 'item 1', value: 1 }]}
    />);

    // The intereactive element uses the suffix __control **note there are two underscores** 
    sut.find('.list__control').first().simulate('keyDown', { key: 'ArrowDown', keyCode: 40 });
    sut.find('.list__control').first().simulate('keyDown', { key: 'Enter', keyCode: 13 });

    // the selected value uses the suffix __single-value **note there are two underscores** 
    expect(sut.find('.list__single-value').first().text()).toEqual('item 1');
});

score 4 · Answer 6 · answered Mar 13 '19 at 04:49

4

For newer version of react-select (2.x+), the above method doesn't work because react-select uses emotion. Thus, wrapper.find('.Select-control') or wrapper.find('.list__option') no longer works. react-select 2.x+ wraps the Select component inside of a state manager but you can access the onChange method of the Select component. I use the following code to trigger selection:

wrapper.find(Select).props().onChange({ value: ... })

answered Mar 13 '19 at 04:49

Armin Primadi

754
6
10

1

How do you define `Select` in this test ? – Chris Oct 24 '19 at 14:46
1

@Chris Either import it from 'react-select' or place it inside 'Select' string. – Gopal Saini Nov 11 '19 at 22:23
1

what are you testing if you're just manually invoking its `onChange` though? – George Mauer Dec 30 '19 at 19:07
For example, if you are testing the validation of a form and if it displays an error. The method in which you invoke onChange doesn't matter because that's not the point of the test. The point of the test is to test whether it displays an error when invalid value is entered (i.e. invalid email address). – Armin Primadi May 30 '20 at 13:22

score 2 · Answer 7 · answered Oct 19 '18 at 03:16

2

Just want to add, I actually had to add the classNamePrefix prop to the Select component otherwise I didn't get any *__control classes to latch onto.

answered Oct 19 '18 at 03:16

Quinton Aiken

151
1
7

score 2 · Answer 8 · answered May 14 '19 at 21:47

2

In case somebody is using enzyme, this worked for me:

  wrapper.find('Select').simulate('change', {
    target: { name: 'select', value: 1 },
  });

where "select" is the name of the attribute as defined here:

  <Select
      name="select"
      ...

and "value" is the desired option's value.

answered May 14 '19 at 21:47

AnaPana

1,958
19
18

1

In my case, It worked with `wrapper.find('Select').simulate('change', {value: 1, label: 'label' });`. Without wrapping it in `target`. – Shubham Jain Jun 28 '19 at 23:28

score 2 · Answer 9 · answered Oct 08 '20 at 10:25

With react-testing-library:

<Select id='myId' onChange=(list: ReactSelectOption[]) => {
                        props.changeGroupItem(
                            {
                                items: list ? list.map((item) => item.value) : [],
                            }
                        );
                    }
/>

And then in my test

const selectInput = container.querySelector(`#myId input`) as HTMLInputElement;
    fireEvent.focus(selectInput);
    fireEvent.mouseDown(selectInput);
    fireEvent.click(getByText("myValue"));
    expect(props.changeGroupItem).toHaveBeenCalledWith(
        {
            items: ["myDefaultValue", "myValue"],
        }
    );

score 2 · Answer 10 · answered Oct 14 '20 at 09:26

There is a library to Simulate user events on react-select elements, for use with react-testing-library. Works with react select 2+.

https://www.npmjs.com/package/react-select-event

Like so:

const { getByRole, getByLabelText } = render(
  <form role="form">
    <label htmlFor="food">Food</label>
    <Select options={OPTIONS} name="food" inputId="food" isMulti />
  </form>
);
expect(getByRole("form")).toHaveFormValues({ food: "" });
 
await selectEvent.select(getByLabelText("Food"), ["Strawberry", "Mango"]);
expect(getByRole("form")).toHaveFormValues({ food: ["strawberry", "mango"] });
 
await selectEvent.select(getByLabelText("Food"), "Chocolate");
expect(getByRole("form")).toHaveFormValues({
  food: ["strawberry", "mango", "chocolate"],
});

score 2 · Answer 11 · answered Jul 26 '22 at 22:37

I had the same problem to test react-select, so my solution was this.

my react-select component:

      <Select
      options={options}
      placeholder="Select an Option"
    />

my test:

  it('should select an option', () => {
    const { getByText } = render(
      <MySelect/>
    );

    fireEvent.focus(getByText('Select an Option'));

    fireEvent.keyDown(getByText('Select an Option'), {
      key: 'ArrowDown',
      code: 40,
    });

    fireEvent.click(getByText("my wanted option"));
    expect(getByText("my wanted option")).toBeDefined();
  }

score 1 · Answer 12 · answered Feb 25 '20 at 16:20

For those who is using enzyme v3.11.0 and react-select v3.0.8, this worked for me

component.find('Select').simulate('keyDown', { key: 'ArrowDown', keyCode: 40 });

Here is my Select. I am using it together with redux-form

<Select
    {...input}
    styles={customStyles}
    options={props.options}
    formatGroupLabel={formatGroupLabel}
    placeholder="Custom Search..."
    isSearchable={true}
    onBlur={handleBlur}
/>

Sample of the tests

it('should render dropdown on keyDown', () => {
    expect(component.find('MenuList').length).toEqual(1);
});

it('should render the correct amount of options', () => {
    expect(component.find('Option').length).toEqual(optionsLength);
});

score 1 · Answer 13 · answered Jul 28 '20 at 10:27

https://stackoverflow.com/a/57699061/10786373 almost works for me. I just added keyDown event for opening a select menu.

it('my test', () => {
  const { container } = getShallow();
  const elSelector = container.querySelector('.Select-input');

  expect(propsComponent.onPageSizeChange).toHaveBeenCalledTimes(0);

  // open select menu
  fireEvent.keyDown(elSelector, { keyCode: 13 });

  // choose next option
  fireEvent.keyDown(elSelector, { key: 'ArrowDown', code: 40 });

  // send the option
  fireEvent.keyDown(elSelector, { keyCode: 13 });

  expect(propsComponent.onPageSizeChange).toHaveBeenCalledTimes(1);
});

score 1 · Answer 14 · answered Aug 05 '20 at 17:27

1

wrapper.find(ReactSelectComponent.instance().onChange(...params));

answered Aug 05 '20 at 17:27

Cody Elhard

655
1
7
17

score 1 · Answer 15 · answered Jan 11 '21 at 15:47

1

I tried all solutions here - nothing worked for me.

I was able to solve the problem with the user-event library. Checkout the selectOptions function.

answered Jan 11 '21 at 15:47

maddob

989
1
12
29

score 0 · Answer 16 · answered May 04 '23 at 22:09

I had a similar issue with my implementation MUI react Select component. I couldn't find a good solution other than this:

  it('changes the state when an option is checked', async () => {
    const result = renderWithContext(
      <div>
        <MySelectImplementation  />
      </div>
    );

    const selectOptions= screen.getByRole('button', {
      name: `${btnText}`,
    });

    await act(async () => {
      await fireEvent.keyDown(selectOptions.firstChild as ChildNode, {
        key: 'ArrowDown',
      });
    });

    await waitFor(() => screen.getByText('Text In My List'));
    const checkBoxes = screen.getAllByRole('checkbox');
// check the first checkbox
    fireEvent.click(checkBoxes[0]);

    expect(
      result.store.getState().optionState
    ).toEqual(['Text In My List']);
  });

score 0 · Answer 17 · answered May 16 '23 at 09:49

0

I was still struggling with the same issue but after spending some time on it found a way to handle react-select dropdown for automation testing, you can find the solution here.

It is worth mentioning that no extra dom is needed to achieve this.

answered May 16 '23 at 09:49

Osama Malik

267
2
6