Nik Sumeiko

Agentic TDD with  React Masterclass

Packt Publishing Limited

Pair with AI and master the Outside-in TDD approach to confidently ship React features through tests

Test Driven Development is widely discussed, but in practice it is often reduced to writing isolated unit tests that add limited value to real applications. This is especially true in React, where testing can quickly become brittle, overly coupled to implementation, and difficult to maintain.This masterclass focuses on a more effective approach. You will learn how to apply Outside in TDD using the double loop model, where high level acceptance tests guide development and lower level unit tests support implementation. The emphasis is on using tests as a tool for design, not just verification.Through a structured, live coding session, you will see how this approach helps reduce regression risk, improve architectural clarity, and make refactoring a predictable and safe activity. The session is grounded in practical examples and is designed to reflect how TDD can be applied in real development environments. <h4> </h4>

Meet Your Instructor <h3>Nik Sumeiko</h3><h4>Software Engineer, Architect at Erste Digital</h4>Nik has over 15 years of experience building scalable web applications. Specialising in JavaScript, TypeScript, React, and Node.js, he combines strong engineering fundamentals with systems level thinking to create software that is robust, maintainable, and production ready.An active contributor to the developer community, Nik has supported over 32,000 engineers through mentoring programs, workshops, and bite sized lessons. In this React workshop, he brings a practical, real world perspective to help you go beyond theory and build with confidence

<h4>Who Should Attend?</h4>This masterclass is ideal for:<ul><li>React developers who want to level up their testing discipline</li><li>Engineers struggling with brittle or hard-to-maintain test suites</li><li>Teams transitioning from ad-hoc testing to structured TDD</li><li>Technical leads who want safer refactoring practices</li><li>Developers interested in architecture and clean design principles</li></ul>Familiarity with React and basic testing tools is recommended.<h4> What You Will Learn?</h4>This is a hands on workshop focused on practical application. You will:<ul><li>Apply Outside in TDD using the double loop model</li><li>Use Red Green Refactor effectively in a front end context</li><li>Distinguish clearly between acceptance and unit tests</li><li>Structure React applications to separate business logic from framework concerns</li></ul>You will also explore:<ul><li>A working example based on a payee verification flow</li><li>Practical approaches to introducing TDD within teams</li><li>Common challenges and how to address resistance</li><li>How TDD fits into real workflows, including CI and collaborative practices# </li></ul><h4>What Will I Be Able to Do After This Workshop?</h4>By the end of this session, you’ll be able to:<ul><li>Full workshop recording for later reference</li><li>Certificate of completion to validate your learning</li><li>Apply Outside in TDD confidently in React applications</li><li>Use acceptance tests to guide feature development</li><li>Write focused unit tests that support business logic</li><li>Separate business logic from framework dependencies</li><li>Refactor safely with a strong testing foundation</li><li>Introduce TDD practices into existing teams and codebases</li><li>Design React systems with clearer boundaries and better maintainability</li></ul>You’ll move from “testing React components” to designing software through tests.

Agenda

Instructor intro + credibility
Learning outcomes overview
Audience pulse check (e.g., interactive Slido poll)

Opening & housekeeping 

The cost of not testing first.
Real enterprise data: bugs decrease.
Developer Maturity Model: where TDD fits.

Why TDD matters in modern React development

Discussion and clarifications | Q&A #1 

Classical Red-Green-Refactor recap
Outer loop: high-level acceptance test → refactor
Inner loop: low-level unit test → pass → refactor
The 5 steps of Outside-in TDD
Testing pyramid for React apps

Core Concepts: Outside in TDD - The Double Loop

Q&A #2

Introduce the demo app (Payee verification)
Write the first failing acceptance test (RED)
Compose the React view layer
Hit the first inner loop demand for business logic

Live coding 1: Driving UI with acceptance tests

Break

Recap + preview

Write unit tests for a pure business logic function (in baby steps)
RED → GREEN → Refactor (inner loop)
No React/framework dependency — Separation of Concerns in action
Dependency Inversion design principle in React

Live coding 2 : Driving business logic implementation via unit tests

Wire business logic into the React component
Acceptance test → GREEN 
Refactor with confidence (safety net = green tests)
Second increment: new acceptance test, repeat the cycle

Live coding 3: Integration and completing the outer loop

Start with the next feature, not a rewrite
Ping-pong TDD + pair programming
CI pipeline: fix failures before new work
Handling common objections

Agentic TDD with React Masterclass

More events from Packt Publishing Limited

Discover more events from Packt Publishing Limited, from Science & Tech to other experiences you might love.

Still looking for the right event?

Explore all online events to browse and filter by date, category, and more.

Agentic TDD with React Masterclass

More events from Packt Publishing Limited

Discover more events from Packt Publishing Limited, from Science & Tech to other experiences you might love.

You might also like...

Browse more events with different dates, prices, and formats to find your next great experience.

Still looking for the right event?

Explore all online events to browse and filter by date, category, and more.