docs(tests): Add specific guidance to testing standalone - #4611
Open
Zac-Smucker-Bryan wants to merge 3 commits into
Open
docs(tests): Add specific guidance to testing standalone#4611Zac-Smucker-Bryan wants to merge 3 commits into
Zac-Smucker-Bryan wants to merge 3 commits into
Conversation
For Angular, React, and Vue. Includes new testing page for Vue as a starter.
|
@Zac-Smucker-Bryan is attempting to deploy a commit to the Ionic Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
thetaPC
requested changes
Aug 4, 2026
| /> | ||
| </head> | ||
|
|
||
| # Testing Ionic Vue |
Contributor
There was a problem hiding this comment.
We should be consistent with the other pages and not use the frontmatter title.
Suggested change
| # Testing Ionic Vue |
Clarity on use of componentOnReady, conciseness of test example Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Slight rephrasing of paragraph explaining componentOnReady helper Add more concise test to Angular using componentOnReady helper Move Angular to last part of Unit Testing Add example test for React, matching Angular Small formatting edits to Vue, add Vue testing page to sidebar
Author
|
Thanks for the feedback @thetaPC. I think I addressed all your comments. Let me know what else might need to be changed. |
thetaPC
requested changes
Aug 5, 2026
Comment on lines
+57
to
+73
| ```tsx | ||
| import { test, expect } from 'vitest'; | ||
| import { render } from '@testing-library/react'; | ||
| import { componentOnReady } from '@ionic/core'; | ||
|
|
||
| import App from './App'; | ||
|
|
||
| test('renders the submit button', async () => { | ||
| const { container } = render(<App />); | ||
|
|
||
| const button = container.querySelector('ion-button'); | ||
|
|
||
| await new Promise<void>((resolve) => componentOnReady(button!, () => resolve())); | ||
|
|
||
| expect(button?.textContent).toContain('Submit'); | ||
| }); | ||
| ``` |
Contributor
There was a problem hiding this comment.
Wrapped in IonApp to match the first best practice on this page, moved the non-null assertion to the query so the last line reads cleanly, and dropped the vitest import since the other snippets here stay runner agnostic.
Suggested change
| ```tsx | |
| import { test, expect } from 'vitest'; | |
| import { render } from '@testing-library/react'; | |
| import { componentOnReady } from '@ionic/core'; | |
| import App from './App'; | |
| test('renders the submit button', async () => { | |
| const { container } = render(<App />); | |
| const button = container.querySelector('ion-button'); | |
| await new Promise<void>((resolve) => componentOnReady(button!, () => resolve())); | |
| expect(button?.textContent).toContain('Submit'); | |
| }); | |
| ``` | |
| ```tsx | |
| import { IonApp } from '@ionic/react'; | |
| import { render } from '@testing-library/react'; | |
| import { componentOnReady } from '@ionic/core'; | |
| import Example from './Example'; | |
| test('renders the submit button', async () => { | |
| const { container } = render( | |
| <IonApp> | |
| <Example /> | |
| </IonApp> | |
| ); | |
| const button = container.querySelector('ion-button')!; | |
| await new Promise<void>((resolve) => componentOnReady(button, () => resolve())); | |
| expect(button.textContent).toContain('Submit'); | |
| }); |
|
|
||
| ### Waiting for Components | ||
|
|
||
| When you need to wait for an Ionic component to render before asserting against its DOM, use the `componentOnReady` helper exported from `@ionic/core`. Do not call `el.componentOnReady()` directly. `@ionic/vue` uses Stencil's custom elements build, where that method does not exist on the element. The helper waits one animation frame instead, giving the component's inner contents a chance to render. |
Contributor
There was a problem hiding this comment.
Forgot to mention it in the last review. This should also have an example like the other two frameworks. Consistency is very important for our docs.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Resolves #3808
Description
componentOnReadyfor standalone projects from@ionic/coreas a helper to improve testing when working with Ionic standalone, for Angular, React, and VueChange Type
Rationale / Problems Fixed
Standalone users can't always consistently test what they need without better guidance.
Notes / Comments
There is a companion issue (ionic-team/ionic-framework#31312) and PR (ionic-team/ionic-framework#31313) in ionic-framework that might need to be coordinated for language tweaks.