Contract Testing MicroFrontends

TLDR; You need to define your integration points and define clear ownership around them. TypeScript will get you a nearly thorough compile time check. Write tooling and decouple concerns. –

These connections will make your system fragile when it wants to evolve.

The host creates the consumer in the agreed ways, sends and updates props and receives events.

A simple contract in TypeScript for the props and actions and their payloads.
Different actions need different payloads (or none), and the errors are immediately flagged.
The Host and Consumer are only responsible for their own behaviour according to the contract, therefore should test only that part of the contract. Each area will set up their own testing strategy, therefore gaining independence.
A good contract can make MicroFrontends reusable across different Hosts and also make MicroFrontends easily replaceable.
Mock MicroFrontend to debug and visualise props received, and faking actions to the Host.
To find out more about architecture, click here.

Similiar Articles


Sign up today for monthly newsletters containing:

  • News and insights from your industry
  • Relevant thought leadership articles
  • Engaging video content
  • Notifications of our upcoming events
  • Networking opportunities with C-Suite leaders