Para probar una entrada, funciona así:
it('test input', () => { const { getByTestId, getByLabelText } = render(<MyComponent />); const myButton = getByTestId('submit-button'); expect(myButton).toBeInTheDocument(); fireEvent.change(getByLabelText('first-name'), { target: { value: 'ted' } }); // do something }); la prueba anterior establece el valor de la entrada first-name en "ted" y avanza.
Quiero hacer algo similar pero para un selector desplegable.
Este es el componente:
<SelectInput label='my-dropdown' onChange={onChange} options={myOptions} />; myOptions es una matriz de esta forma:
const myOptions = [ { id: '0', name: 'zero' }, { id: '1', name: 'one' }, { id: '2', name: 'two' } ];funciona bien en la aplicación, no hay errores de esta parte.
Aquí viene la prueba, hice algo pero no funciona:
it('test dropdpwn', () => { const { getByTestId, getByLabelText } = render(<MyComponent />); const saveButton = getByTestId('submit-button'); expect(saveButton).toBeInTheDocument(); fireEvent.change(getByLabelText('my-dropdown'), { target: { value: { id: '0', name: 'zero' } } }); // do something });el código anterior no funciona, no establece el menú desplegable con ese valor.
¿Alguna idea sobre cómo resolver esto? No estoy seguro de si es importante, pero todas esas entradas están dentro de un formulario de gancho de reacción y al final debería probar que onSubmit está funcionando (funciona solo si todas las entradas están configuradas).
Entonces, dado que el comportamiento de selección se logra usando un botón y se extiende.
Primero debe hacer clic en el botón que traerá todas las opciones en la pantalla y luego debe hacer clic en una de esas opciones.
Y luego finalmente puede probar que la opción seleccionada ahora está en la pantalla.
it("test dropdpwn", async () => { const { getByTestId, getByLabelText } = renderWithClientInstance( <MapSignalModal title={title} open={true} toggle={toggle} /> ); userEvent.click(screen.getAllByTestId("selectButton")[0]); userEvent.click(screen.getByText("sensor pool 1")); expect( await screen.findByText(screen.getByText("sensor pool 1")) ).toBeInTheDocument(); });Además, para estar realmente seguro de que puede intentar lo siguiente, esto debería fallar porque la opción "grupo de sensores 1" no está inicialmente en la pantalla.
Y debería pasar cuando el texto se cambia a "grupo de sensores 0" porque eso está inicialmente en la pantalla.
it("test dropdpwn", async () => { const { getByTestId, getByLabelText } = renderWithClientInstance( <MapSignalModal title={title} open={true} toggle={toggle} /> ); expect(screen.getByText("sensor pool 1")).toBeInTheDocument(); // if you replace the above text to "sensor pool 0", it should work });