React app shall tackle real-world scenarios your customers go through

May 2nd, 2023

React app shall tackle real-world scenarios your customers go through. Most of them are within edge cases.

Automate these with integration tests‌!

It's a test that wires together multiple layers of the app, enabling to assert user journeys occurring within a single page. This is where we handle all the edge cases.

MakeDomesticPayment.test.tsx

it('see receiver bank name when making a domestic payment', () => {
  cy.intercept('**/receiver?iban=AT123', {
    body: { bankName: 'Erste Bank' },
  });
 
  cy.mount(<PaymentPage />);
  cy.findByLabelText('Receiver').type('AT123');
 
  cy.getByTestId('receiver-bank-name').should('have.text', 'Erste Bank');
});

This software behavior is not part of a happy path because, with or without it, the customer can make a payment anyway. Therefore, we don't waste resources covering it using the E2E test.

The detail provides confidence for the customer that the money will be transferred to a known bank within the country. Quite important but not critical information. Therefore, the integration test fits best for this edge case.

Test in place. Now it's time to implement this software behavior.

Welcome to the Test-driven Development with React ✌️

Discuss on LinkedIn