Tengo un elemento TextField de interfaz de usuario de material que realiza un seguimiento de la latitud. La latitud solo debe estar entre -90 y 90 grados. Tengo una prueba unitaria para hacer cumplir esto, pero cuando trato de actualizar el valor en el elemento TextField usando userEvent.type, actualmente no se está actualizando. Cuando depuro, el valor de latitud es "1", el mismo que estoy pasando con la entidad.

El elemento que quiero cambiar:

 <div> <TextField id="editor-latitude" label={"Latitude"} defaultValue={latitude} error={latitudeError !== ""} helperText={latitudeError} variant="standard" onChange={(e) => setLatitude(e.target.value)} InputProps={{ endAdornment: <InputAdornment position="end">degrees</InputAdornment> }} inputProps={{ "aria-label": "Latitude" }} data-testId="editor-latitude" /> </div>

La prueba unitaria:

 describe("Test", () => { const entity: MapEntity = { id: "1", latitude: 1, }; test.each([ ["-91", true], ["-90", false], ["0", false], ["90", false], ["91", true], ["abc", true] ])("Latitude values test", async (val: string, error: boolean) => { const { queryByLabelText, queryByTestId } = render(<EntityEditor entities={[entity]} />); expect(queryByLabelText("edit entity")).toBeInTheDocument(); queryByLabelText("edit entity")!.click(); await waitFor(() => expect(queryByTestId("editor-dialog")).toBeInTheDocument()); const latitude = queryByLabelText("Latitude"); userEvent.type(latitude!, val); expect(latitude?.outerHTML.includes('aria-invalid="false"')).toBe(true); queryByLabelText("save")!.click(); expect(latitude?.outerHTML.includes('aria-invalid="true"')).toBe(error); }); })

Cosas que he probado:

• cambiando userEvent.type a fireEvent.change
• limpiando primero el contenedor de latitud
• Envolviendo user.type en un waitFor

¡Cualquier ayuda es apreciada!