ionic-team · Zac-Smucker-Bryan · Jul 31, 2026
@@ -178,6 +178,47 @@ describe('PayrolService', () => {
 });
 ```
 
+### Import `componentOnReady` for standalone projects
+
+When testing Ionic components, use the exported `componentOnReady` helper from `@ionic/core` instead of calling `el.componentOnReady()` directly. The helper works with both lazy-loaded and custom-element builds, making it more likely the component has finished rendering before making assertions against its rendered DOM or running accessibility tests. See an example here:
+
+```tsx
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { axe, toHaveNoViolations } from 'jasmine-axe';
+import { componentOnReady } from '@ionic/core';
+
+import { Component } from './component';
+
+describe('Component', () => {
+  let component: Component;
+  let fixture: ComponentFixture<Component>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Component],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should pass accessibility test', async () => {
+    const el = fixture.nativeElement.querySelector('ion-button');
+
+    await new Promise<void>((resolve) => {
+      componentOnReady(el, () => resolve());
+    });
+
+    jasmine.addMatchers(toHaveNoViolations);
+
+    const a11y = await axe(fixture.nativeElement);
+
+    expect(a11y).toHaveNoViolations();
+  });
+});
+```
+
 #### Testing HTTP Data Services
 
 Most services that perform HTTP operations will use Angular's HttpClient service in order to perform those operations. For such tests, it is suggested to use Angular's `HttpClientTestingModule`. For detailed documentation of this module, please see Angular's <a href="https://angular.io/guide/http#testing-http-requests" target="_blank">Angular's Testing HTTP requests</a> guide.

@@ -49,3 +49,7 @@ test('example', async () => {
 ```
 
 For more information on `user-event`, see the [user-event documentation](https://testing-library.com/docs/user-event/intro/).
+
+## Import `componentOnReady` for standalone projects
+
+When testing Ionic components, use the exported `componentOnReady` helper from `@ionic/core` instead of calling `el.componentOnReady()` directly. The helper works with both lazy-loaded and custom-element builds, making it more likely the component has finished rendering before making assertions against its rendered DOM or running accessibility tests.
@@ -0,0 +1,25 @@
+---
+title: Testing
+---
+
+<head>
+  <title>Vue Unit and End-to-End Testing for Ionic App Components</title>
+  <meta
+    name="description"
+    content="Vue apps created using Ionic are automatically set up for unit and end-to-end testing. Read to learn more about testing tools for Ionic components."
+  />
+</head>
+
+# Testing Ionic Vue
+
+This document provides an overview of how to test an application built with `@ionic/vue`. It covers the basics of testing with Vue, as well as the specific tools and libraries developers can use to test their applications.
+
+## Introduction
+
+Testing is an important part of the development process, and it helps to ensure that an application is working as intended.
+
+## Best Practices
+
+### Import `componentOnReady` for standalone projects
+
+When testing Ionic components, use the exported `componentOnReady` helper from `@ionic/core` instead of calling `el.componentOnReady()` directly. The helper works with both lazy-loaded and custom-element builds, making it more likely the component has finished rendering before making assertions against its rendered DOM or running accessibility tests.