End-to-End Testing

End-to-End Testing Overview

At its core, end-to-end testing is about doing one thing well inside your single-spa project. Once you understand the pattern, you can apply it consistently across features and teams.

Good end-to-end testing pays off across the whole codebase: fewer surprises, easier testing, and smoother onboarding. The snippet below is a solid starting point.

import * as app from './org-checkout.js';

test('exports single-spa lifecycles', () => {
  expect(typeof app.bootstrap).toBe('function');
  expect(typeof app.mount).toBe('function');
  expect(typeof app.unmount).toBe('function');
});

Verify each micro frontend exports valid single-spa lifecycle functions.

End-to-End Testing Example

registerApplication({
  name: '@org/app',
  app: () => System.import('@org/app'),
  activeWhen: ['/app'],
});
start();

• Start from a minimal End-to-End Testing example and grow it only as needed.
• Keep configuration explicit so End-to-End Testing behaves the same in every environment.
• Name things clearly so teammates understand your End-to-End Testing at a glance.
• Add tests around End-to-End Testing early to lock in expected behaviour.

Single-SPA Cheatsheet

Core single-spa APIs related to end-to-end testing.

How End-to-End Testing Works in Single-SPA

End-to-End Testing is part of how single-spa lets multiple applications — even in different frameworks — coexist on one page. A root config registers each app and controls when it is active.

Verify each micro frontend exports valid single-spa lifecycle functions.

• A root config registers apps and calls start().
• Each app exports bootstrap, mount, and unmount lifecycles.
• activeWhen decides which routes each app owns.
• Import maps resolve each app's bundle at runtime.

Practical Guidance for End-to-End Testing

For reliable micro frontends, end-to-end testing should isolate failures and keep shared state minimal. Let each team own its app end to end while agreeing on a few shared contracts.

Common Mistakes

• Copying end-to-end testing snippets without understanding what each line does.
• Skipping error handling and edge cases when wiring up end-to-end testing.
• Leaving end-to-end testing untested, so regressions slip into production.
• Over-engineering end-to-end testing before you actually need the extra flexibility.

Key Takeaways

• End-to-End Testing is a core part of working effectively with single-spa.
• Start small and keep end-to-end testing focused on a single responsibility.
• Apply consistent patterns so end-to-end testing scales across your project.
• Test and document end-to-end testing to keep it maintainable over time.