reactjs - 如何设置输入值

Question

我有一个如下所示的受控形式：

 const [credentials, setCredentials] = useState<Credentials>({
    username: "",
    password: ""
 });
 const handleChange = (value: string, name: string) => {
    setCredentials(cred => ({
      ...cred,
      [name]: value
    }));
 };
 <Form onSubmit={onSubmit} data-testid="login-form">
      <Input
        value={credentials.username}
        name="username"
        handleChange={handleChange}
      />
      <Input
        value={credentials.password}
        name="password"
        handleChange={handleChange}
      />
      <Button disabled={!credentials.username || !credentials.password}>
        {buttonText}
      </Button>
</Form>

Form，Input并且Button组件不是外部 UI 组件，位于另一个目录中。该Input组件具有 的data-testid属性form-input。

这是我的测试：

it("should call handleSubmit in props when clicked", () => {
    render(<LoginForm handleSubmit={handleSubmit} buttonText="button" />);
    const btn = screen.getByText("button");
    const inputs = screen.queryAllByTestId("form-input");
    fireEvent.change(inputs[0], { target: { value: "username" } });
    fireEvent.change(inputs[1], { target: { value: "pass" } });
    fireEvent.click(btn);
    expect(handleSubmit).toHaveBeenCalledWith("username", "pass");
});

onChange这工作正常，但在每个测试中设置这样的输入（在每个输入上触发一个事件）听起来像是额外的工作。有没有更好的方法，还是我错过了什么？

标签： reactjsjestjsreact-testing-library