Test-Driven React

Testing Nested Markup

So far, we’ve used React to encapsulate the functionality of a single DOM element (<button>) in a component (CarouselButton). But React components are capable of doing more than that. Next, we’ll build the CarouselSlide component, which will be responsible for rendering several distinct DOM elements:

• An <img> to display the actual image
• A <figcaption> to associate caption text with the image

• Text, some of which will be wrapped in <strong> for emphasis
• A <figure> to wrap it all up

We’ll take a TDD approach to building this tree while ensuring that the props we provide to CarouselSlide are routed correctly. Start by creating a “stub” of the component, a minimal implementation you can add functionality to later:

// src/CarouselSlide.js ...