-
Notifications
You must be signed in to change notification settings - Fork 13.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
bug: React overlay hooks are not unit testable #23776
Comments
Thanks for the issue. Just so I understand, are you using |
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 |
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) |
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. |
Hi, 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 |
Hi everyone, This issue is resolved by using the latest version of Jest and Testing Library. The 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! |
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. |
Prequisites
Ionic Framework Version
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
: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
useIonToast
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).
The text was updated successfully, but these errors were encountered: