Reaccionar biblioteca de prueba en el cambio para el componente Material UI Select

El paso a paso o código que verás en este artículo es la resolución más eficiente y válida que hallamos a tu duda o problema.

El componente de selección de material-ui utiliza el evento mouseDown para activar la aparición del menú emergente. Si utiliza fireEvent.mouseDown eso debería activar la ventana emergente y luego puede hacer clic en su selección dentro del cuadro de lista que aparece. vea el ejemplo a continuación.

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";

it('selects the correct option', () => 
  const getByRole = render(
     <>  
       
         Privacy
         My Account
       
       /* value set in state */
     
  );

  fireEvent.mouseDown(getByRole('button'));

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

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

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

Esto resulta ser muy complicado cuando usa Material-UI Select con native=false (que es el predeterminado). Esto se debe a que la entrada renderizada ni siquiera tiene un elemento HTML, pero en cambio es una mezcla de divs, una entrada oculta y algunos svgs. Luego, cuando hace clic en seleccionar, se muestra una capa de presentación (algo así como un modal) con todas sus opciones (que no están elementos HTML, por cierto), y creo que es al hacer clic en una de estas opciones lo que activa todo lo que pasó como el onChange devolución de llamada a su Material-UI original

Todo eso para decir, si estás dispuesto a usar , entonces tendrás y Elementos HTML con los que trabajar, y puede activar un evento de cambio en el como hubieras esperado.

Aquí hay un código de prueba de un Code Sandbox que funciona:

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(
    

      

Option 1 Option 2 Option 3