userEvent.typeのvalueがなぜか空になる

[cossack910]

問題コード

describe("Input form onChnage event", () => {
  it("入力値テスト", () => {
    render(<RenderInput outputConsole={console.log} />);
    const inputValue = screen.getByPlaceholderText("enter") as HTMLInputElement; //型キャストしないとvalueで警告
    userEvent.type(inputValue, "test"); ←こいつ
    expect(inputValue.value).toBe("test");
  });
});

[cossack910]

解決

describe("Input form onChnage event", () => {
  it("入力値テスト", async () => {
    render(<RenderInput outputConsole={console.log} />);
    const inputValue = screen.getByPlaceholderText("enter") as HTMLInputElement; //型キャストしないとvalueで警告
    await userEvent.type(inputValue, "test");
    expect(inputValue.value).toBe("test");
  });
});

[cossack910]

原因

userEvent.type が入力をシミュレートする速度が速すぎて、Reactの更新が間に合っていなかった。

解決

awaitを入れて入力値がtestになるまで待ってからマッチャする。