userEvent.type 来自 React 测试库，未使用默认值更新 material UI TextField 中的输入值

Question

我有一个 material UI TextField 元素来跟踪纬度。纬度应仅在 -90 到 90 度之间。我有一个单元测试来强制执行此操作，但是当我尝试使用 userEvent.type 更新 TextField 元素中的值时，它当前没有更新。当我调试时，纬度的值为“1”，与我传入的实体相同。

我要更改的元素：

<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>

单元测试：

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);
        });

})

我尝试过的事情：

• 将 userEvent.type 更改为 fireEvent.change
• 先清除纬度容器
• 在 waitFor
中包装 user.type

感谢任何帮助！

Answer 1

问题是我忘记添加了 TextField 组件中的 value={latitude}。添加之后，我需要在单元测试中调用 userEvent.clear(latitude) 然后 userEvent.type 工作正常。