Testing React Apps in Practice

Writing a currency converter from scratch in React using TDD.

Hey!

I'm Alex, web-developer at DRIVE2.RU

I write a technical blog and work on educational projects. Some you may have heard of:

What We Will Write and Test

Component Diagram

The application will have 3 main blocks: a header with the current rate and the “Update” button, a form with fields for amounts, and a random quote in the footer.

TDD Development Cycle

The cycle consists of 3 stages: the red zone, when the tests fail; the green zone, when we implement the functionality that passes the tests; the blue zone, where we refactor the code.

Data Flow Diagram

The data is stored in the storage, updated through actions, and affects how the page is rendered. Requests to the server are handled by middleware.

Difference in Data Format

Central Bank gives data in XML, we need JSON.

About React Testing Library

About Mocks

About Testing Redux

About Testability

Alex Bespoyasov 👋