Testing React Apps with Jest and React Testing Library/

...

/

Quiz Yourself on Firing Events

Quiz Yourself on Firing Events

This quiz will test what you have learned in this chapter.

We'll cover the following...
Technical Quiz
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? Multi-select

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();
});
1 / 6