score:15

Accepted answer

I have reproduced your code and for me the test does not work with toBeInTheDocument, but works with toBeVisible as long as display: none is there.

Here is the code of my test file, the first test does not pass, the second passes:

import React from "react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import SummaryForm from "./App";

describe("popover responds to hover", () => {
  test("popover initially is hidden (test with toBeInTheDocument)", () => {
    render(<SummaryForm />);
    const nullPopover = screen.queryByText(/No ice cream will be delivered/i);
    expect(nullPopover).not.toBeInTheDocument();
  });

  test("popover initially is hidden (test with toBeVisible)", () => {
    render(<SummaryForm />);
    const nullPopover = screen.queryByText(/No ice cream will be delivered/i);
    expect(nullPopover).not.toBeVisible();
  });
});

And here is the codesandbox where you can see it in action.


Related Query

More Query from same tag