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.
MicroFrontends
Different actions need different payloads (or none), and the errors are immediately flagged.
MicroFrontends
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.
MicroFrontends
A good contract can make MicroFrontends reusable across different Hosts and also make MicroFrontends easily replaceable.
MicroFrontends
Mock MicroFrontend to debug and visualise props received, and faking actions to the Host.
To find out more about architecture, click here.

Similiar Articles

JOIN THE COMMUNITY

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