bug: React overlay hooks are not unit testable

[vmdominguez]

Prequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [X] v5.x
• [ ] v6.x

Current Behavior

I am migrating some overlay component usages in my Ionic React v5 app to use the overlay hooks. These have simplified several of my components and are a great option to have. However, several of my unit tests for the components that are now using the overlay hooks are now failing due to a TypeError:

    TypeError: Cannot read property ‘present’ of undefined
      at Object.present (node_modules/@ionic/react/src/hooks/useController.ts:71:24)

I’ve traced this to a line in @ionic/core (src/utils/overlays.ts) which checks for web component support (typeof customElements !== ‘undefined’).

Expected Behavior

ionic-react-test-utils mocks out the overlay components, I assume, for the same reason -- lack of web component support in the jsdom environment used by Jest. I would expect the hooks to work in some way for unit tests so that the tests can validate the expected behavior of the overlays in the same way that the overlay components (mostly) work in the jsdom environment.

Steps to Reproduce

1. Use any of the new overlay hooks e.g. useIonToast
2. Write and run a unit test that renders the component that utilizes the overlay hook and causes the present method returned by the hook to be called.

Code Reproduction URL

https://github.com/vmdominguez/ionic-hooks-test-sandbox

Ionic Info

Ionic:

Ionic CLI : 6.12.1 Ionic Framework : @ionic/react 5.6.1

Capacitor:

Capacitor CLI : 2.4.2 @capacitor/core : 2.4.5

Utility:

cordova-res : not installed native-run : not installed

System:

NodeJS : v12.22.0 (/usr/local/bin/node) npm : 6.14.11 OS : macOS Big Sur

Additional Information

Please let me know if you would prefer I open a but with ionic-react-test-utils. I decided to start here because IMHO not being able to write tests for components that utilize the hooks is a bug with the framework (that may be resolved by new features of ionic-react-test-utils).

[liamdebeasi]

Thanks for the issue. Just so I understand, are you using ionic-react-test-utils when testing overlay components? If so, could you please create a reproduction of this issue in an Ionic starter app and provide a link to the repo?

[vmdominguez]

Sure, I've updated the original issue post with the URL. I forked the codesandbox for #23741 and then published to GitHub as the tests were not running in codesandbox. Note that I ran into this issue while running this on my local environment -- I got around it by applying this suggestion

[liamdebeasi]

Thanks! Are you able to reproduce this in an Ionic React starter app from the Ionic CLI? I tried running the tests using the GitHub repo provided, but I get the following error:

appTsConfig.compilerOptions[option] = suggested;
                                                                 ^

TypeError: Cannot add property target, object is not extensible

If I downgrade to React Scripts 3 I get this error:

 ReferenceError: React is not defined

      3 |
      4 | test("shows the toast", async () => {
    > 5 |   render(<App />);
        |          ^
      6 |
      7 |   expect(
      8 |     await screen.findByText("Toast should be visible")

      at Object.<anonymous> (src/App.test.tsx:5:10)

[vmdominguez]

Unfortunately I am working behind a corporate firewall which prevents me from pushing to GitHub by conventional means. I've reproduced the issue locally with the ionic CLI and have updated the codesandbox repo linked above to reflect the dependencies and tsconfig.json created by the CLI. It should resolve any issues you had while running the tests.

[snr-lab]

Hi, I am getting same issue. I created a sample project to replicate this issue. https://github.com/snr-lab/IonicReactTest

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.

Thnak you

[liamdebeasi]

Hi everyone,

This issue is resolved by using the latest version of Jest and Testing Library. The ionic-react-test-utils library has been deprecated as it is no longer needed.

Please see our documentation for instructions on how to test overlay hooks: https://ionicframework.com/docs/react/testing/unit-testing/examples#testing-a-modal-presented-from-useionmodal

I am going to close this, but let me know if there are any questions. Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.