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.