Quiz Yourself on Firing Events
This quiz will test what you have learned in this chapter.
1
We have the following component which allows a user to enter and submit some search criteria:
export function SearchForm() {
const [submittedSearch, setSubmittedSearch] = React.useState("");
function handleSubmit(e) {
e.preventDefault();
const formData = new FormData(e.target);
const criteria = formData.get("criteria");
search(criteria);
setSubmittedSearch(criteria);
}
return (
<>
<form onSubmit={handleSubmit}>
<input type="search" name="criteria" aria-label="Search" />
<button type="submit">Search</button>
</form>
{submittedSearch && <p>Searched for {submittedSearch}</p>}
</>
);
}
(Select all that apply.) Which test(s) successfully checks that the search criteria is rendered when the search criteria is entered and submitted?
A)
test("Submitting a search should render the criteria entered", async () => {
const user = userEvent.setup();
render(<SearchForm />);
screen.getByLabelText("Search").focus();
await user.keyboard("test{enter}");
expect(await screen.findByText(/test/)).toBeInTheDocument();
});
B)
test("Submitting a search should render the criteria entered", async () => {
const user = userEvent.setup();
render(<SearchForm />);
screen.getByLabelText("Search").focus();
await user.keyboard("test");
expect(await screen.findByText(/test/)).toBeInTheDocument();
});
C)
test("Submitting a search should render the criteria entered", async () => {
const user = userEvent.setup();
render(<SearchForm />);
screen.getByLabelText("Search").focus();
await user.keyboard("test");
await user.click(screen.getByText("Search"));
expect(await screen.findByText(/test/)).toBeInTheDocument();
});
D)
test("Submitting a search should render the criteria entered", async () => {
const user = userEvent.setup();
render(<SearchForm />);
await user.click(screen.getByText("Search"));
screen.getByLabelText("Search").focus();
await user.keyboard("test");
expect(await screen.findByText(/test/)).toBeInTheDocument();
});
Question 1 of 60 attempted
Get hands-on with 1400+ tech skills courses.