el problema aquí es que la función de autocompletar usa portales de forma predeterminada y muestra las opciones en el cuerpo... que no está presente en el contenedor renderizado, debe mostrar la función de autocompletar en el cuerpo del documento

Dado que los elementos de la lista no son "visibles" en el propio DOM, debe utilizar un enfoque diferente.

Debe ubicar los elementos DOM de autocompletar e ingresar en los que desencadenará eventos.

El autocompletado generalmente se encuentra en el DOM por el atributo de rol, por ejemplo, role="combobox" , pero es mejor darle un identificador único como data-testid="autocomplete"

El siguiente código muestra cómo probar la selección de elementos en autocompletar:

 const autocomplete = getByTestId('autocomplete'); const input = within(autocomplete).querySelector('input') autocomplete.focus() // assign value to input field fireEvent.change(input, { target: { value: value } }) await wait() // navigate to the first item in the autocomplete box fireEvent.keyDown(autocomplete, { key: 'ArrowDown' }) await wait() // select the first item fireEvent.keyDown(autocomplete, { key: 'Enter' }) await wait() // check the new value of the input field expect(input.value).toEqual('some_value')

Debe insertar un valor en el elemento de entrada y luego activar el cambio. Después de eso, se abre el cuadro de lista que permite seleccionar el primer valor presionando la tecla Intro. El valor seleccionado reemplazará el valor inicial ingresado utilizado para buscar/abrir el autocompletado.

// make sure autocomplete reactions/results do not already exist expect(screen.queryByText(/Loading/)).not.toBeInTheDocument() expect(screen.queryByText(/Van Halen/)).not.toBeInTheDocument() // fill out autocomplete const faveBand = screen.getByLabelText(/Favorite Band/) userEvent.type(faveBand, 'Van H') expect(faveBand).toHaveValue('Van H') // witness autocomplete working expect(screen.getByText(/Loading/)).toBeInTheDocument() // wait for response (i used an async Material-UI autocomplete) // favebands is a data-testid attribute value in my autocomplete // component, eg ListboxProps={{ 'data-testid': 'favebands' }} await waitFor(() => getByTestId('favebands')) // verify autocomplete items are visible expect(screen.getByText(/Van Halen/)).toBeInTheDocument() // click on autocomplete item const faveBandItem = screen.getByText('Van Halen') userEvent.click(faveBandItem) // verify autocomplete has new value expect(faveBand).toHaveValue('Van Halen')

Importo userEvent, waitFor y screen así...

 import { screen, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event'

En primer lugar, debe asegurarse de que las opciones no sean una matriz vacía, luego haga lo siguiente:

 const autocomplete = getByTestId('autocomplete'); const input = within(autocomplete).getByRole('textbox') autocomplete.focus() // the value here can be any string you want, so you may also consider to // wrapper it as a function and pass in inputValue as parameter fireEvent.change(input, { target: { value: 'a' } }) fireEvent.keyDown(autocomplete, { key: 'ArrowDown' }) fireEvent.keyDown(autocomplete, { key: 'Enter' })

Puede usar la función onInputChange para averiguar si se ha cambiado la entrada.

 test('my test', () => { const { container } = render( <Autocomplete noOptionsText="no Option" getOptionLabel={(option) => option.name} onInputChange={(__, value) => { //implements logic when value is selected }} multiple id="my-id" options={[{ name: 'My name 1' }]} renderInput={(params) => <TextField {...params} label="My Label" />} /> ) const input = container.querySelector('#my-id') fireEvent.change(input, { target: { value: { name: 'My name 1' } } }) })

necesitas ir siguiendo:

1. haga clic en autocompletar
2. opción de búsqueda
3. Seleccionar opción

 const label = 'label of your autocomplete' const textBox = screen.getByRole('textbox', { name: label, }); userEvent.click(textBox); // wait for option to appear await waitFor(() => { screen.getByRole('listbox'); }); // grab option const opt = screen.getByRole('option', { name: /The Great Dictator/i, }); // select it userEvent.click(opt);

Aquí está mi opinión usando react-testing-library -> user-event. Para que funcione, tuve que asignar data-testid a las opciones de menú que se muestran en la función de autocompletar.

 const autoComplete = screen.getByRole("combobox"); expect(autoComplete).toBeVisible(); const autoCompleteDropdown = screen.getByRole("button", { name: "Open" }); // Autocomplete dropdown button. expect(autoCompleteDropdown).toBeVisible(); userEvent.click(autoCompleteDropdown); // Autocomplete dropdown view. expect(screen.getByRole("presentation")).toBeVisible(); // click on administrator menu option in autocomplete. userEvent.click(screen.getByTestId("option1")); // imitate click away(this is only required if you have disableCloseOnSelect is enabled. userEvent.click(document.body); expect(screen.queryByRole("presentation")).not.toBeInTheDocument(); //Verify autocomplete shows the correct value. expect(screen.getByText("option1")).toBeVisible();

encontré este como mi solución

 const autoComplete = getByLabelText('component-autoComplete'); const input = within(autoComplete).getByRole('textbox'); autoComplete.focus(); fireEvent.change(input, { target: { value: 'mockValue' } }); fireEvent.keyDown(autoComplete, { key: 'ArrowDown' }); fireEvent.keyDown(autoComplete, { key: 'Enter' }); expect(input).toHaveValue('mockValue');

Todavía no lo he probado en el ejemplo de mui, pero lo hice en mi aplicación y funciona de la siguiente manera:

 userEvent.type(screen.getByRole("textbox", {name: /attendees/i}), "Bertrand") userEvent.click(screen.getByText(/bertrand/i))

simule un tipo de evento de usuario (aquí, Bertrand , en su ejemplo: Schindlers ), donde el nombre dado a screen.getByRole es el valor de la etiqueta de su autocompletar (en su ejemplo: openOnFocus: false . luego simule un clic en el esperado texto (es decir: un texto que está presente en sus opciones, por ejemplo Schindlers ).

NB: lo he probado en @mui/material AutoComplete no del laboratorio

En mi caso, necesitaba ingresar valores en dos campos de autocompletar para habilitar el botón de página siguiente. Modifiqué las respuestas principales porque no funcionaba para mí.

 const autocompleteClient = renderResult.getByTestId('client'); const inputClient = autocompleteClient.querySelector('input'); autocompleteClient.focus(); // assign value to input field of client fireEvent.change(inputClient!!, { target: { value: 'Client 1' } }) // presentation role is for the options of the autocomplete await renderResult.findAllByRole('presentation'); fireEvent.keyDown(autocompleteClient, { key: 'ArrowDown' }) fireEvent.keyDown(autocompleteClient, { key: 'Enter' }) const autocompleteProposal = renderResult.getByTestId('proposal-no'); const inputProposal = autocompleteProposal.querySelector('input'); autocompleteProposal.focus(); fireEvent.change(inputProposal!!, { target: { value: 'proposal 1' } }) await renderResult.findAllByRole('presentation'); fireEvent.keyDown(autocompleteProposal, { key: 'ArrowDown' }) fireEvent.keyDown(autocompleteProposal, { key: 'Enter' }) expect(screen.getByText('Next')).toBeEnabled(); fireEvent.click(screen.getByText('Next')); expect(screen.getByText('Generate')).toBeDisabled();

Donde renderResult = render(<YourComponent/>);

Pude encontrar una solución que permite esperar a que aparezca el menú de opciones y validar esas opciones.

Los pasos clave para poder utilizar las opciones devueltas por la API simulada fueron:

1. Haga clic en el botón "Abrir" que forma parte del componente Autocompletar
2. Elementos waitFor() con role="option" para que aparezcan en el DOM

También envío la entrada a HTMLInputElement ya que mis pruebas están escritas en TypeScript.

 test("sends API request on search", async () => { // arrange render(<Dropdown />); // act const autocomplete = screen.getByRole("combobox"); const input: HTMLInputElement = within(autocomplete).getByLabelText( "Select a template" ) as HTMLInputElement; const searchValue = "react-boiler"; const templateValue = "react-boilerplate"; autocomplete.focus(); // open autocomplete dropdown menu within(autocomplete).getByLabelText("Open").click(); const options = await screen.findAllByRole("option"); // Perform some tests specific to the options provided to the dropdown // expect(options).toHaveLength(7); // assign value to input field fireEvent.change(input, { target: { value: searchValue } }); // navigate to the first item in the autocomplete box fireEvent.keyDown(autocomplete, { key: "ArrowDown" }); // select the first item fireEvent.keyDown(autocomplete, { key: "Enter" }); // check the new value of the input field expect(input.value).toEqual(templateValue); });