Not able to test Alert / Popover content

Ionic Framework Ionic React
1

The test renderer not able to find Alert / Popover content

Here is my component

const ExploreContainer: React.FC<ContainerProps> = () => {
  const [ showAlert ] = useIonAlert();
  return (
    <div className="container">
      <IonButton expand="block" onClick={ () =>
          showAlert({ header: 'Alert', message: 'alert from hook', buttons: [ 'Ok' ] })
        }
      >Show Alert
      </IonButton>
    </div>
  );
};

This is my test case

describe("Test component", () => {
    beforeEach(()=>{
        render(
            <IonApp>
                <ExploreContainer />
            </IonApp>
        );
    });

    test("Alert test", async () => {
        fireEvent.click(screen.getByText("Show Alert"));
		await waitFor(()=>{
			expect(screen.getByText("alert from hook")).toBeVisible();
		});
    })
});

This is the error

Test component › Alert test

    Unable to find an element with the text: alert from hook. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

    <body>
      <div>
        <ion-app>
          <div
            class="container"
          >
            <ion-button
              expand="block"
            >
              Show Alert
            </ion-button>
          </div>
        </ion-app>
      </div>
    </body>

      15 |     test("Alert test", async () => {
      16 |         fireEvent.click(screen.getByText("Show Alert"));
    > 17 |              await waitFor(()=>{
         |                    ^
      18 |                      expect(screen.getByText("alert from hook")).toBeVisible();
      19 |              });
      20 |     })

      at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:173:27)
      at Object.test (src/components/ExploreContainer.test.tsx:17:9)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        9.408 s
2

any help is much appreciated.

3

Can you make a quick sample project to look at?

4

Thank you very much for your response. I have created a sample project at

You can run dev server using “ionic serve” and click on Show Alert button to display alert. Now run “npm test” to execute test cases. The test case could not find the alert box text.

The particular component and corrosponding test case is available at /src/components directory.

Please leave a reply in case you face any issue.

Thank you once again for your help.

5

Thanks for the sample project! This appears to be an outstanding issue with the new overlay hooks. Seems that the ionic-react-testing-utils have not been updated to account for them. We currently have a similar issue here

We’ll be tracking this and will take a look!

6

Thank you for your confirmation.