CODEWITHSUNDEEP
reactjsmaterial-uireact-testing-library
Rob Sanders
Rob Sanders

Reputation: 5347

React testing library on change for Material UI Select component

I am trying to test the onChange event of a Select component using react-testing-library.

I grab the element using getByTestId which works great, then set the value of the element and then call fireEvent.change(select); but the onChange is never called and the state is never updated.

I have tried using both the select component itself and also by grabbing a reference to the underlying input element but neither works.

Any solutions? Or is this a know issue?

Upvotes: 87

Views: 103243

Answers (17)

Sky
Sky

Reputation: 579

Shortest Solution

import userEvent from '@testing-library/user-event';


await userEvent.click(screen.getByRole('combobox'))

or whatever else that is role or data-testid of your select

USE await AND userEvent

Upvotes: -1

Alice Xu
Alice Xu

Reputation: 11

The way I solve it is by using userEvent to click on the element with the role combobox. Wait for the options rendered on the screen and fire the click event on the selected option.

it("should open the option list", async () => {
  const handleChange = jest.fn();
  const user = userEvent.setup();
  render(
    <Select value="option2" onChange={handleChange}>
      <MenuItem value={0} data-testid="option-option1">option1</MenuItem>
      <MenuItem value={1} data-testid="option-option2">option2</MenuItem>
    </Select>
  );
  user.click(screen.getByRole("combobox"));
  await waitFor(() => {
   expect(screen.getByTestId("option-option1")).toBeTruthy();
   expect(screen.getByTestId("option-option2")).toBeTruthy();
  });
  fireEvent.click(screen.getByTestId("option-option1"));
  expect(handleChange).toHaveBeenCalled();
 });

Upvotes: 0

BluePanda
BluePanda

Reputation: 21

In my case i used the mouseDown event relative to the MUI Select component to be able to trigger the popup menu

  it('can see devices tree view', async () => {
    const onChangeHandler = jest.fn();
    const { getByRole } = render(
      <Select onChange={onChangeHandler} value="0">
        <MenuItem value="TEST1" />
        <MenuItem value="TEST2" />
        <MenuItem value="TEST3" />
      </Select>,
    );
    // menu items are not visible
    screen.debug(undefined, 100_000);
    fireEvent.mouseDown(getByRole('combobox'));
    // menu items are visible
    screen.debug(undefined, 100_000);
  });

Upvotes: 2

quangdng
quangdng

Reputation: 11

This is how I normally do it for MUI v5, make sure you follow accessibility guideline for select component.

render(<Component />)

const selectInput = screen.getByLabelText("your label")
expect(selectInput).toHaveTextContent("expected value")

The difference is instead of using expect(input).toHaveValue like normal input element, since the rendered input of MUI v5 Select is hidden and not linked to rendered label, we try to assert the div that was linked to the rendered label instead. Naming of variables could be better but hope this makes sense.

Upvotes: 0

Shep N
Shep N

Reputation: 41

ref: typescript

I have verified this works with multiple select fields; however, for this to work be sure to create your MenuItem options like this:

<MenuItem value={value} aria-label={name}>
    {name}
</MenuItem>

Helper to click on a MUI Select.

export const clickSelect = async (element: HTMLElement, value: string) => {
  const button = await within(element).findByRole('button');
  await act(async () => {
    fireEvent.mouseDown(button);
  });

  const option = await screen.findByRole('option', {
    name: new RegExp(value, 'i'),
  });

  await act(async () => {
    fireEvent.click(option);
  });
};

In your test code:

test('test', async () => {
    //...
    const selectElement = screen.getByTestId('my-select-test-id');

    await clickSelect(selectElement, 'Option Name');
    //...
});

Upvotes: 4

Konrad Grzyb
Konrad Grzyb

Reputation: 1985

With MUI 5.10.5 it is enough if you set your data-testid using inputProps property

<Select ... inputProps={{ 'data-testid': 'YOUR-TEST-ID-NAME' }} />

Later on you can fire event change on this element

...
const selector = comp.getByTestId('YOUR-TEST-ID-NAME');

fireEvent.change(selector, { target: { value: 'Tested value' } });

Upvotes: 1

Gabriel
Gabriel

Reputation: 1449

Using Material UI 5.10.3, this is how to simulate a click on the Select component, and to subsequently grab/verify the item values, and to click one of them to trigger the underlying change event:

import { fireEvent, render, screen, within } from '@testing-library/react';
import { MenuItem, Select } from '@mui/material';

describe('MUI Select Component', () => {
  it('should have correct options an handle change', () => {
    const spyOnSelectChange = jest.fn();

    const { getByTestId } = render(
      <div>
        <Select
          data-testid={'component-under-test'}
          value={''}
          onChange={(evt) => spyOnSelectChange(evt.target.value)}
        >
          <MenuItem value="menu-a">OptionA</MenuItem>
          <MenuItem value="menu-b">OptionB</MenuItem>
        </Select>
      </div>
    );

    const selectCompoEl = getByTestId('component-under-test');

    const button = within(selectCompoEl).getByRole('button');
    fireEvent.mouseDown(button);

    const listbox = within(screen.getByRole('presentation')).getByRole(
      'listbox'
    );

    const options = within(listbox).getAllByRole('option');
    const optionValues = options.map((li) => li.getAttribute('data-value'));

    expect(optionValues).toEqual(['menu-a', 'menu-b']);

    fireEvent.click(options[1]);
    expect(spyOnSelectChange).toHaveBeenCalledWith('menu-b');
  });
});

Also posted here.

Upvotes: 10

bigpotato
bigpotato

Reputation: 27507

For people who have multiple Selects, make sure to add the name prop

          <SelectDropdown
            name="date_range"
            ...
          >
            ...
          </SelectDropdown>
          <SelectDropdown
            name="company"
            ...
          >
            ...
          </SelectDropdown> 

    // date filter
    const date_range_dropdown = getByLabelText('Date Range');
    fireEvent.mouseDown(date_range_dropdown);
    await screen.findByRole('listbox');
    fireEvent.click(
      within(screen.getByRole('listbox')).getByText(/Last 30 Days/)
    );

    // // company filter
    const company_dropdown = getByLabelText('Company');
    fireEvent.mouseDown(company_dropdown);
    fireEvent.click(within(getByRole('listbox')).getByText(/Uber/));

Upvotes: 1

haasdev
haasdev

Reputation: 2161

material-ui's select component uses the mouseDown event to trigger the popover menu to appear. If you use fireEvent.mouseDown that should trigger the popover and then you can click your selection within the listbox that appears. see example below.

import React from "react";
import { render, fireEvent, within } from "react-testing-library";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import Typography from "@material-ui/core/Typography";

it('selects the correct option', () => {
  const {getByRole} = render(
     <>  
       <Select fullWidth value={selectedTab} onChange={onTabChange}>
         <MenuItem value="privacy">Privacy</MenuItem>
         <MenuItem value="my-account">My Account</MenuItem>
       </Select>
       <Typography variant="h1">{/* value set in state */}</Typography>
     </>
  );
  
  fireEvent.mouseDown(getByRole('button'));

  const listbox = within(getByRole('listbox'));

  fireEvent.click(listbox.getByText(/my account/i));

  expect(getByRole('heading')).toHaveTextContent(/my account/i);
});

Upvotes: 176

deansimcox
deansimcox

Reputation: 426

This is what worked for me while using MUI 5.

      userEvent.click(screen.getByLabelText(/^foo/i));
      userEvent.click(screen.getByRole('option', {name: /^bar/i}));

Upvotes: 2

Alan
Alan

Reputation: 1

I have done with multiple Select in one page, try this one:

import { render, fireEvent, within } from '@testing-library/react'

 it('Should trigger select-xxx methiod', () => {
  const { getByTestId, getByRole: getByRoleParent } = component
  const element = getByTestId('select-xxx');
  const { getByRole } = within(element)
  const select = getByRole('button')
  fireEvent.mouseDown(select);
  const list = within(getByRoleParent('listbox')) // get list opened by trigger fireEvent
  fireEvent.click(list.getByText(/just try/i)); //select by text
})

Upvotes: 0

kentr
kentr

Reputation: 1119

Using *ByLabelText()

Component

// demo.js
import * as React from "react";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import Typography from "@mui/material/Typography";

export default function BasicSelect() {
  const [theThing, setTheThing] = React.useState("None");

  const handleChange = (event) => {
    setTheThing(event.target.value);
  };

  return (
    <Box sx={{ minWidth: 120 }}>
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Choose a thing</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={theThing}
          label="Choose a thing"
          onChange={handleChange}
        >
          <MenuItem value={"None"}>None</MenuItem>
          <MenuItem value={"Meerkat"}>Meerkat</MenuItem>
          <MenuItem value={"Marshmallow"}>Marshmallow</MenuItem>
        </Select>
      </FormControl>
      <Box sx={{ padding: 2 }}>
        <Typography>The thing is: {theThing}</Typography>
      </Box>
    </Box>
  );
}

Test

// demo.test.js
import "@testing-library/jest-dom";
import { render, screen, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import Demo from "./demo";

test("When I choose a thing, then the thing changes", async () => {
  render(<Demo />);

  // Confirm default state.
  expect(await screen.findByText(/the thing is: none/i)).toBeInTheDocument();

  // Click on the MUI "select" (as found by the label).
  const selectLabel = /choose a thing/i;
  const selectEl = await screen.findByLabelText(selectLabel);

  expect(selectEl).toBeInTheDocument();

  userEvent.click(selectEl);

  // Locate the corresponding popup (`listbox`) of options.
  const optionsPopupEl = await screen.findByRole("listbox", {
    name: selectLabel
  });

  // Click an option in the popup.
  userEvent.click(within(optionsPopupEl).getByText(/marshmallow/i));

  // Confirm the outcome.
  expect(
    await screen.findByText(/the thing is: marshmallow/i)
  ).toBeInTheDocument();
});

codesandbox Note: Test doesn't run on codesandbox, but does run and pass on local.

Upvotes: 15

Stefan Vucic
Stefan Vucic

Reputation: 35

I had some problems with Material UI select element but at the end I found this simple solution.

const handleSubmit = jest.fn()

const renderComponent = (args?: any) => {
  const defaultProps = {
    submitError: '',
    allCurrencies: [{ name: 'CAD' }, { name: 'EUR' }],
    setSubmitError: () => jest.fn(),
    handleSubmit,
    handleClose,
  }

  const props = { ...defaultProps, ...args }
  return render(<NewAccontForm {...props} />)
}

afterEach(cleanup)

// TEST

describe('New Account Form tests', () => {
  it('submits form with corret data', async () => {
    const expectedSubmitData = {
      account_type: 'Personal',
      currency_type: 'EUR',
      name: 'MyAccount',
    }
    const { getByRole, getAllByDisplayValue } = renderComponent()
    const inputs = getAllByDisplayValue('')
    fireEvent.change(inputs[0], { target: { value: 'Personal' } })
    fireEvent.change(inputs[1], { target: { value: 'EUR' } })
    fireEvent.change(inputs[2], { target: { value: 'MyAccount' } })
    userEvent.click(getByRole('button', { name: 'Confirm' }))
    await waitFor(() => {
      expect(handleSubmit).toHaveBeenCalledWith(expectedSubmitData)
      expect(handleSubmit).toHaveBeenCalledTimes(1)
    })
  })
})

Upvotes: 1

theRealEmu
theRealEmu

Reputation: 1484

Here is a working example for MUI TextField with Select option.

Sandbox: https://codesandbox.io/s/stupefied-chandrasekhar-vq2x0?file=/src/__tests__/TextSelect.test.tsx:0-1668

Textfield:

import { TextField, MenuItem, InputAdornment } from "@material-ui/core";
import { useState } from "react";

export const sampleData = [
  {
    name: "Vat-19",
    value: 1900
  },
  {
    name: "Vat-0",
    value: 0
  },
  {
    name: "Vat-7",
    value: 700
  }
];

export default function TextSelect() {
  const [selected, setSelected] = useState(sampleData[0].name);

  return (
    <TextField
      id="vatSelectTextField"
      select
      label="#ExampleLabel"
      value={selected}
      onChange={(evt) => {
        setSelected(evt.target.value);
      }}
      variant="outlined"
      color="secondary"
      inputProps={{
        id: "vatSelectInput"
      }}
      InputProps={{
        startAdornment: <InputAdornment position="start">%</InputAdornment>
      }}
      fullWidth
    >
      {sampleData.map((vatOption) => (
        <MenuItem key={vatOption.name} value={vatOption.name}>
          {vatOption.name} - {vatOption.value / 100} %
        </MenuItem>
      ))}
    </TextField>
  );
}

Test:

import { fireEvent, render, screen } from "@testing-library/react";
import React from "react";
import { act } from "react-dom/test-utils";
import TextSelect, { sampleData } from "../MuiTextSelect/TextSelect";
import "@testing-library/jest-dom";

describe("Tests TextField Select change", () => {

  test("Changes the selected value", () => {
    const { getAllByRole, getByRole, container } = render(<TextSelect />);

    //CHECK DIV CONTAINER
    let vatSelectTextField = container.querySelector(
      "#vatSelectTextField"
    ) as HTMLDivElement;
    expect(vatSelectTextField).toBeInTheDocument();

    //CHECK DIV CONTAINER
    let vatSelectInput = container.querySelector(
      "#vatSelectInput"
    ) as HTMLInputElement;
    expect(vatSelectInput).toBeInTheDocument();
    expect(vatSelectInput.value).toEqual(sampleData[0].name);

    // OPEN
    fireEvent.mouseDown(vatSelectTextField);

    //CHECKO OPTIONS
    expect(getByRole("listbox")).not.toEqual(null);
    // screen.debug(getByRole("listbox"));

    //CHANGE
    act(() => {
      const options = getAllByRole("option");
      // screen.debug(getAllByRole("option"));
      fireEvent.mouseDown(options[1]);
      options[1].click();
    });

    //CHECK CHANGED
    vatSelectInput = container.querySelector(
      "#vatSelectInput"
    ) as HTMLInputElement;
    expect(vatSelectInput.value).toEqual(sampleData[1].name);
  });
});

/**
 * HAVE A LOOK AT
 *
 *
 * https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Select/Select.test.js
 * (ll. 117-121)
 *
 * https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/TextField/TextField.test.js
 *
 *
 */

Upvotes: 7

khousuylong
khousuylong

Reputation: 419

it('Set min zoom', async () => { 
  const minZoomSelect = await waitForElement( () => component.getByTestId('min-zoom') );
  fireEvent.click(minZoomSelect.childNodes[0]);

  const select14 = await waitForElement( () => component.getByText('14') );
  expect(select14).toBeInTheDocument();

  fireEvent.click(select14);

});

Upvotes: 0

Ivan Valadares
Ivan Valadares

Reputation: 71

import * as React from "react";
import ReactDOM from 'react-dom';
import * as TestUtils from 'react-dom/test-utils';
import { } from "mocha";

import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";

let container;

beforeEach(() => {
    container = document.createElement('div');
    document.body.appendChild(container);
});

afterEach(() => {
    document.body.removeChild(container);
    container = null;
});

describe("Testing Select component", () => {

    test('start empty, open and select second option', (done) => {

        //render the component
        ReactDOM.render(<Select
            displayEmpty={true}
            value={""}
            onChange={(e) => {
                console.log(e.target.value);
            }}
            disableUnderline
            classes={{
                root: `my-select-component`
            }}
        >
            <MenuItem value={""}>All</MenuItem>
            <MenuItem value={"1"}>1</MenuItem>
            <MenuItem value={"2"}>2</MenuItem>
            <MenuItem value={"3"}>3</MenuItem>
        </Select>, container);

        //open filter
        TestUtils.Simulate.click(container.querySelector('.my-select-component'));

        const secondOption = container.ownerDocument.activeElement.parentElement.querySelectorAll('li')[1];
        TestUtils.Simulate.click(secondOption);

        done();

    });
});

Upvotes: 0

Alvin S. Lee
Alvin S. Lee

Reputation: 5182

This turns out to be super complicated when you are using Material-UI's Select with native={false} (which is the default). This is because the rendered input doesn't even have a <select> HTML element, but is instead a mix of divs, a hidden input, and some svgs. Then, when you click on the select, a presentation layer (kind of like a modal) is displayed with all of your options (which are not <option> HTML elements, by the way), and I believe it's the clicking of one of these options that triggers whatever you passed as the onChange callback to your original Material-UI <Select>

All that to say, if you are willing to use <Select native={true}>, then you'll have actual <select> and <option> HTML elements to work with, and you can fire a change event on the <select> as you would have expected.

Here is test code from a Code Sandbox which works:

import React from "react";
import { render, cleanup, fireEvent } from "react-testing-library";
import Select from "@material-ui/core/Select";

beforeEach(() => {
  jest.resetAllMocks();
});

afterEach(() => {
  cleanup();
});

it("calls onChange if change event fired", () => {
  const mockCallback = jest.fn();
  const { getByTestId } = render(
    <div>
      <Select
        native={true}
        onChange={mockCallback}
        data-testid="my-wrapper"
        defaultValue="1"
      >
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </Select>
    </div>
  );
  const wrapperNode = getByTestId("my-wrapper")
  console.log(wrapperNode)
  // Dig deep to find the actual <select>
  const selectNode = wrapperNode.childNodes[0].childNodes[0];
  fireEvent.change(selectNode, { target: { value: "3" } });
  expect(mockCallback.mock.calls).toHaveLength(1);
});

You'll notice that you have to dig down through the nodes to find where the actual <select> is once Material-UI renders out its <Select>. But once you find it, you can do a fireEvent.change on it.

The CodeSandbox can be found here:

Edit firing change event for material-ui select

Upvotes: 36

Related Questions