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
1 post - 1 participant