jest
That is a perfectly sensible and common scenario for an agile front-end firm managing a platform migration. You are moving from a web-view-based system (Angular/Cordova/Capacitor) to a true native component system (React Native) while maintaining your existing web expertise—a smart, iterative approach.
The answer is Yes, you can use a single test framework, but only for certain layers of your testing pyramid.
You will need a hybrid, layered testing strategy to manage the three distinct environments:
- Shared Business Logic (Unit Tests): YES - Use a single framework here.
- UI Component Logic (Component/Integration Tests): NO - Frameworks are different (Angular vs. React).
- End-to-End (E2E) User Flow Tests: YES, with a caveat - Use a single, powerful tool for cross-platform flows.
1. 🤝 Unified Logic Testing: Jest is Your Champion
Your core focus should be on isolating all platform-agnostic logic into shareable TypeScript/JavaScript libraries (e.g., utility functions, API services, state management).
Framework Choice: Jest
Jest is the definitive choice for this layer because:
| Environment | Use Case with Jest | Why it Works |
|---|---|---|
| Angular | Testing Services, Pipes, Validators, and standalone classes. | Jest is often preferred over Karma/Jasmine for speed and modern features in Angular monorepos (like Nx). |
| Capacitor/Angular | Testing the same shared TypeScript services/logic. | The core logic doesn't know it's running in Capacitor. |
| React Native | Default Framework. Testing utility modules, Redux/Zustand logic, and hooks. | React Native is configured with a Jest preset out-of-the-box. |
By adopting a Monorepo structure (like Nx, which is excellent for combining Angular and React), you can run one consolidated npm run test:logic command across all three environments for all non-UI code.
2. 🤹 Component Testing: You Must Diverge
Testing the UI rendering layer fundamentally requires framework-specific tools because Angular components (HTML/CSS/TypeScript) and React Native components (JSX/Native Modules) render in completely different ways.
- Angular Components: Use Jasmine/Karma (Angular CLI default) or Jest/Angular Testing Library (modern monorepo approach) to render components in a simulated browser DOM.
- React Native Components: Use Jest combined with the React Native Testing Library to render components using the React Test Renderer, which simulates the component tree without accessing native views.
Conclusion: You cannot use one framework to write component tests for both Angular and React Native. The test files themselves must be separate due to the different rendering APIs.
3. 🗺️ Unified End-to-End (E2E) Testing: The Best Candidate
This is where you can achieve true cross-platform test script reuse, but you must choose a tool that can interact with both WebViews (Capacitor/Angular) and true Native Components (React Native).
Tooling Candidates
| Tool | Angular/Capacitor (WebView) | React Native (Native) | Verdict |
|---|---|---|---|
| Cypress/Playwright | Excellent, designed for Web/WebView interaction. | Poor. Cannot reliably interact with true React Native native components. | Good for Web/Capacitor only. |
| Appium / WebdriverIO | Can interact with WebViews inside the native container. | Excellent. Designed to automate true native elements (iOS/Android). | Best for Unified Flow. Uses a standard protocol (WebDriver). |
| Detox | Not applicable. | Excellent, fast, and stable for React Native only. | Best for RN-only native experience. |
| Maestro | Can interact with WebViews. | Excellent, modern, YAML-based native automation. | Strong New Candidate for unified native E2E. |
Recommendation for Your Migration: Appium with WebdriverIO
As a front-end firm focused on continuity, WebdriverIO (which leverages Appium for mobile) is the most robust choice for a single E2E testing layer:
- It uses TypeScript/JavaScript (familiar languages).
- It can target a browser/web-app (Angular web version).
- It can target the Capacitor WebView (Angular hybrid version).
- It can target the React Native app and its native elements.
You can write a single test scenario (e.g., "Log in and submit a form") and run the same test code, with minor element selector adjustments, against all three builds.
Summary of the Hybrid Strategy
| Test Layer | Goal | Framework(s) | Reusability |
|---|---|---|---|
| Unit/Logic | Test business rules, services, state management. | Jest | High (One tool, one codebase for shared logic). |
| Component/Integration | Test UI rendering and component-level events. | Angular/Jest (for Angular) React Native Testing Library (for RN) | Low (Must be separate due to different UI models). |
| E2E/Native | Test full user flows across the running app and device APIs. | Appium/WebdriverIO | High (One tool, shared test scripts for user flows). |
This layered approach gives you the speed and agility of unified unit testing for your core logic, while reserving the expensive E2E tool for its critical function of verifying the final user experience on both the WebView and Native platforms.