End-to-End Testing

End-to-End Testing Overview

End-to-End Testing is a building block you will reach for often in Module Federation. It keeps related logic together and makes your intent obvious to reviewers and future maintainers.

When you learn end-to-end testing properly, you avoid the guesswork that leads to bugs and rework. The example below shows the shape you will use in most real Module Federation projects.

import { render, screen } from '@testing-library/react';
import ProductList from './ProductList';

test('remote component renders products', () => {
  render(<ProductList products={[{ id: 1, name: 'Book' }]} />);
  expect(screen.getByText('Book')).toBeInTheDocument();
});

Test exposed components in isolation the same way you test any local component.

End-to-End Testing Example

new ModuleFederationPlugin({
  name: 'app',
  filename: 'remoteEntry.js',
  exposes: { './Widget': './src/Widget' },
  remotes: { other: 'other@http://host/remoteEntry.js' },
  shared: { react: { singleton: true } },
});

• 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.

Module Federation Cheatsheet

Key Module Federation settings related to end-to-end testing.

How End-to-End Testing Works in Module Federation

End-to-End Testing builds on Module Federation's ability to load code from another independently built and deployed application at runtime. Each app can be a host, a remote, or both.

Test exposed components in isolation the same way you test any local component.

• Remotes expose modules through a remoteEntry.js manifest.
• Hosts declare remotes and import exposed modules dynamically.
• Shared dependencies are deduplicated, ideally as singletons.
• Each micro frontend builds and deploys on its own schedule.

Practical Guidance for End-to-End Testing

In production, end-to-end testing needs careful version management and graceful failure handling. Align shared dependency versions and always render a fallback when a remote cannot load.

Common Mistakes

• 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.
• Ignoring documentation, which makes end-to-end testing hard for the next developer to change.

Key Takeaways

• End-to-End Testing is a core part of working effectively with Module Federation.
• 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.