Skip to content

Modal controller issue with react testing library #2969

Closed
@rawadnasr

Description

@rawadnasr

Ionic version:
[x] 6.0

I'm submitting a ...

[x] bug report
[ ] feature request

Current behavior:

I'm working with react ionic library to test a button click that present Ion modal programatically (using modal controller). The issue is that the content of Ion Modal is not rendered and i can't reach any element in the modal, while when using inline Modals it is working normally.

Expected behavior:

Ion modal content should be rendered normally and I should be able to get any element from the modal

Steps to reproduce:

git clone https://github.com/rawadnasr/Modal-Controller-Issue.git
npm install
npm test

Related code:

import {
    fireEvent,
    render, 
    screen, 
    waitFor
} from '@testing-library/react';
import Home from './Home';


describe('renders normally', () => {
    it('Should open the modal onClick', async () => {
        render(<Home />);
        const btn = screen.getByText('Open')
        fireEvent.click(btn)
        await waitFor(() => {
            expect(screen.getByText("Modal Content")).toBeInTheDocument()
        })
    }
    )
});

Other information:

Screenshot from 2023-03-08 21-34-30

Ionic info:

Ionic:

   Ionic CLI       : 6.20.3 (/home/rawad/.nvm/versions/node/v14.18.1/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 6.6.1

Capacitor:

   Capacitor CLI      : 4.7.0
   @capacitor/android : not installed
   @capacitor/core    : 4.7.0
   @capacitor/ios     : not installed

Utility:

   cordova-res : 0.15.4
   native-run  : 1.7.2

System:

   NodeJS : v14.18.1 (/home/rawad/.nvm/versions/node/v14.18.1/bin/node)
   npm    : 6.14.15
   OS     : Linux 5.19

Metadata

Metadata

Assignees

No one assigned

    Labels

    contentIssues related to the contents of the documentation website

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions