Solución:
Mi equipo tiene una utilidad de prueba en nuestro proyecto que nos permite seleccionar un elemento fácilmente después de pasar demasiado tiempo tratando de averiguar cómo hacerlo correctamente. Compartiéndolo aquí para ayudar a otros.
Esto no depende de ningún componente interno o burla de React Select, pero requiere que haya configurado un <label> que tiene un for enlazando a la entrada React Select. Utiliza la etiqueta para seleccionar un valor de elección dado, tal como lo haría un usuario en la página real.
const KEY_DOWN = 40
// Select an item from a React Select dropdown given a label and
// choice label you wish to pick.
export async function selectItem(
container: HTMLElement,
label: string,
choice: string
): Promise<void> {
// Focus and enable the dropdown of options.
fireEvent.focus(getByLabelText(container, label))
fireEvent.keyDown(getByLabelText(container, label), {
keyCode: KEY_DOWN,
})
// Wait for the dropdown of options to be drawn.
await findByText(container, choice)
// Select the item we care about.
fireEvent.click(getByText(container, choice))
// Wait for your choice to be set as the input value.
await findByDisplayValue(container, choice)
}
Se puede usar así:
it('selects an item', async () => {
const { container } = render(<MyComponent/>)
await selectItem(container, 'My label', 'value')
})
Puede probar lo siguiente para que funcione:
- Evento de enfoque de fuego en el elemento de entrada .react-select del componente ReactSelect.
- Dispare un evento mouseDown en el elemento .react-select__control
- Dispare un clic en el elemento de opción que desea seleccionar
Puede agregar un className y classNamePrefix props con el valor de “react-select” para seleccionar específicamente el componente que está intentando probar.
PD: En caso de que todavía esté atascado, le animo a que eche un vistazo a esta conversación de donde se tomó prestada la respuesta anterior: https://spectrum.chat/react-testing-library/general/testing-react-select~ 5857bb70-b3b9-41a7-9991-83f782377581