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:
¡Cualquier ayuda es apreciada!
El problema fue que olvidé agregar value={latitude} en el componente TextField. Después de agregar eso, necesitaba llamar a userEvent.clear(latitude) en la prueba unitaria, luego el userEvent.type funcionó bien.