Скачать или смотреть Component-driven development with React & DOM testing (Paul Hammond)

In this talk, we will explore the topic of Component-Driven Development with React & DOM Testing, delving into the practical aspects of Test-Driven Development (TDD) for web development with a focus on React and its ecosystem. The audience will gain an understanding of how to create accessible and reusable components, use Storybook for UI development, and address common concerns about DOM testing.

Rough Agenda Outline:

1. Introduction
The role of TDD in web development
The React ecosystem and its relationship with TDD

2. Benefits of Component-Driven Development
Thinking in terms of components
Reusability and composition
Accessibility wins
Using Storybook for UI development

3. Addressing DOM Testing Concerns
Dispelling misconceptions about DOM testing
Demonstrating the speed and efficiency of virtual DOM tests
Handling design changes and refactoring with confidence

4. Building a Feature End-to-End
Identifying new components
Developing HTML structure and CSS in Storybook
Test-driving the React component
Integrating into a fictional website with API calls
Mocking API calls using Mock Service Worker (MSW)
Demonstrating how we can refactor the feature with high confidence

5. Q&A Session
Responding to audience questions


ABOUT PAUL

I’ve been working in the industry for about 15 years. I’ve been doing TDD for about 10 years and have been doing TDD on the front end with React since the first version of React was released (around 2014).

I’ve worked at places like Electronic Arts, BBC Sport, Sky and Equal Experts, and have successfully delivered many large projects at scale using TDD in all of these places.

I believe the purpose of good tests is to give us the confidence to make changes over time, and I’d like to show some of the tools and techniques I use to make this happen in this talk.

LinkedIn:   / paul-hammond-bb5b78251  
GitHub: https://github.com/citypaul

TIMESTAMPS

0:00 Introduction
1:35 Overview
2:47 About me
5:11 Agenda
7:23 Good tests should give us the confidence to make changes over time
8:05 This talk is about the end-to-end workflow
8:45 Component-driven development
11:16 Demo: Modal component (Accessibility)
16:11 Demo: Modal component (Composition)
20:51 Demo: Storybook
23:21 DOM Testing and the testing library suite
25:25 Why test through the DOM?
25:55 Common DOM testing concerns
26:43 Demo: React testing library (input field)
32:08 Demo: React testing library (counter)
37:56 Demo: React testing library (form)
43:41 Mocking API calls with Mock Service Worker
49:25 Bringing it all together: Product Search Feature
58:29 The joy of TDD
1:03:25 The backend for frontend (BFF) pattern
1:06:417 Q&A

TECH EXCELLENCE

Subscribe to our YouTube channel    / @techexcellence  
Join our Meetup Group https://www.meetup.com/techexcellence
Follow us on LinkedIn   / techexcellenceio  
Follow us on Twitter   / techexcellence_  
Join our Discord Community   / discord  

#testdrivendevelopment #tdd #unittesting #react #accessibility #jest #reacttestinglibrary #domtesting #mockserviceworker #techexcellence