25 lines
818 B
TypeScript
25 lines
818 B
TypeScript
import { useState } from "react";
|
|
import { expect, test } from "vitest";
|
|
import { screen } from "@testing-library/react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { renderApp } from "../test/render";
|
|
import { useDebouncedValue } from "./use-debounced-value";
|
|
|
|
function Harness() {
|
|
const [text, setText] = useState("");
|
|
const debounced = useDebouncedValue(text, 150);
|
|
return (
|
|
<div>
|
|
<input aria-label="in" value={text} onChange={(e) => setText(e.target.value)} />
|
|
<span data-testid="out">{debounced}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
test("reflects the value after the delay", async () => {
|
|
renderApp(<Harness />);
|
|
await userEvent.type(screen.getByLabelText("in"), "bronze");
|
|
await screen.findByText("bronze");
|
|
expect(screen.getByTestId("out")).toHaveTextContent("bronze");
|
|
});
|