book

Mastering React Test-Driven Development - Second Edition

Name: Mastering React Test-Driven Development - Second Edition
Author: Daniel Irvine
ISBN: 9781803247120

by Daniel Irvine

September 2022

Intermediate to advanced

564 pages

9h 56m

English

Packt Publishing

Read now

Unlock full access

Mastering React Test-Driven Development
Second EditionForewordContributorsAbout the authorAbout the reviewer
Preface
Who this book is forWhat this book coversTo get the most out of this bookDownload the example code filesDownload the color imagesConventions usedCode snippet conventionsJavaScript conventionsGet in touchShare Your Thoughts
Part 1 – Exploring the TDD Workflow
Chapter 1: First Steps with Test-Driven Development
Technical requirementsCreating a new React project from scratchInstalling npmCreating a new Jest projectBringing in React and BabelDisplaying data with your first testWriting a failing testMake it passMaking use of the act test helperTriangulating to remove hardcodingBacktracking on ourselvesRefactoring your workSharing setup code between testsExtracting methodsWriting great testsRed, green, refactorStreamlining your testing processSummaryFurther reading
Chapter 2: Rendering Lists and Detail Views
Technical requirementsSketching a mock-upCreating the new componentSpecifying list item contentSelecting data to viewInitial selection of dataAdding events to a functional componentManually testing our changesAdding an entry pointPutting it all together with webpackSummaryExercisesFurther reading
Chapter 3: Refactoring the Test Suite
Technical requirementsPulling out reusable rendering logicCreating a Jest matcher using TDDExtracting DOM helpersSummaryExercisesFurther reading
Chapter 4: Test-Driving Data Input
Technical requirementsAdding a form elementAccepting text inputSubmitting a formSubmitting without any changesPreventing the default submit actionSubmitting changed valuesDuplicating tests for multiple form fieldsNesting describe blocksGenerating parameterized testsSolving a batch of testsModifying handleChange so that it works with multiple fieldsTesting it outSummaryExercises
Chapter 5: Adding Complex Form Interactions
Technical requirementsChoosing a value from a select boxProviding select box optionsPreselecting a valueConstructing a calendar viewAdding the tableAdding a header columnAdding a header rowTest-driving radio button groupsHiding input controlsSelecting a radio button in a groupHandling field changes through a component hierarchyReducing effort when constructing componentsExtracting test data builders for time and date functionsExtracting a test props objectSummaryExercisesFurther reading
Chapter 6: Exploring Test Doubles
Technical requirementsWhat is a test double?Learning to avoid fakesSubmitting forms using spiesUntangling AAAMaking a reusable spy functionUsing a matcher to simplify spy expectationsSpying on the fetch APIReplacing global functions with spiesTest-driving fetch argument valuesReworking existing tests with the side-by-side implementationImproving spy expectations with helper functionsStubbing fetch responsesUpgrading spies to stubsActing on the fetch responseDisplaying errors to the userGrouping stub scenarios in nested describe contextsMigrating to Jest’s built-in test double supportUsing Jest to spy and stubMigrating the test suite to use Jest’s test double supportExtracting fetch test functionalitySummaryExercisesFurther reading
Chapter 7: Testing useEffect and Mocking Components
Technical requirementsMocking child componentsHow to mock components, and why?Testing the initial component propsFetching data on mount with useEffectUnderstanding the useEffect hookAdding the renderAndWait helperAdding the useEffect hookTesting the useEffect dependency listBuilding matchers for component mocksVariants of the jest.mock callRemoving the spy functionRendering the children of mocked componentsChecking multiple instances of the rendered componentAlternatives to module mocksSummaryExercisesFurther reading

Chapter 8: Building an Application Component
Technical requirementsFormulating a planUsing state to control the active viewTest-driving callback propsMaking use of callback valuesSummaryExercises
Part 2 – Building Application Features
Chapter 9: Form Validation
Technical requirementsPerforming client-side validationValidating a required fieldGeneralizing validation for multiple fieldsSubmitting the formExtracting non-React functionality into a new moduleHandling server errorsIndicating form submission statusTesting state before promise completionRefactoring long methodsSummaryExercisesFurther reading
Chapter 10: Filtering and Searching Data
Technical requirementsDisplaying tabular data fetched from an endpointPaging through a large datasetAdding a button to move to the next pageAdjusting the design Adding a button to move to the previous pageForcing design changes using testsFiltering dataRefactoring to simplify the component designPerforming actions with render propsTesting render props in additional render contextsSummaryExercises
Chapter 11: Test-Driving React Router
Technical requirementsDesigning React Router applications from a test-first perspectiveA list of all the React Router piecesSplitting tests when the window location changesUp-front design for our new routesTesting components within a routerThe Router component and its test equivalentUsing the Routes component to replace a switch statementUsing intermediate components to translate URL stateTesting router linksChecking the page for hyperlinksMocking the Link componentTesting programmatic navigationSummaryExerciseFurther reading
Chapter 12: Test-Driving Redux
Technical requirementsUp-front design for a reducer and a sagaWhy Redux?Designing the store state and actionsTest-driving a reducerPulling out generator functions for reducer actionsSetting up a store and an entry pointTest-driving a sagaUsing expect-redux to write expectationsMaking asynchronous requests with sagasSwitching component state for Redux stateSubmitting a React form by dispatching a Redux actionMaking use of store state within a componentNavigating router history in a Redux sagaSummaryExerciseFurther reading
Chapter 13: Test-Driving GraphQL
Technical requirementsCompiling the schema before you beginTesting the Relay environmentBuilding a performFetch functionTest-driving the Environment object constructionTest-driving a singleton instance of EnvironmentFetching GraphQL data from within a componentSummaryExercisesFurther reading
Part 3 – Interactivity
Chapter 14: Building a Logo Interpreter
Technical requirementsStudying the Spec Logo user interfaceUndoing and redoing user actions in ReduxBuilding the reducerBuilding buttonsSaving to local storage via Redux middlewareBuilding middlewareChanging keyboard focusWriting the reducerFocusing the promptRequesting focus in other componentsSummaryFurther reading
Chapter 15: Adding Animation
Technical requirementsDesigning animationBuilding an animated line componentAnimating with requestAnimationFrameCanceling animations with cancelAnimationFrameVarying animation behaviorSummaryExercises
Chapter 16: Working with WebSockets
Technical requirementsDesigning a WebSocket interactionThe sharing workflowThe new UI elementsSplitting apart the sagaTest-driving a WebSocket connectionStreaming events with redux-sagaUpdating the appSummaryExercisesFurther reading
Part 4 – Behavior-Driven Development with Cucumber
Chapter 17: Writing Your First Cucumber Test
Technical requirementsIntegrating Cucumber and Puppeteer into your code baseWriting your first Cucumber testUsing data tables to perform setupSummary
Chapter 18: Adding Features Guided by Cucumber Tests
Technical requirementsAdding Cucumber tests for a dialog boxFixing Cucumber tests by test-driving production codeAdding a dialog boxUpdating sagas to a reset or replay stateAvoiding timeouts in test codeAdding HTML classes to mark animation statusUpdating step definitions to use waitForSelectorSummaryExercise
Chapter 19: Understanding TDD in the Wider Testing Landscape
Test-driven development as a testing techniqueBest practices for your unit testsImproving your techniqueManual testingDemonstrating softwareTesting the whole productExploratory testingDebugging in the browserAutomated testingIntegration testsSystem tests and end-to-end testsAcceptance testsProperty-based and generative testingSnapshot testingCanary testingNot testing at allWhen quality doesn’t matterSpiking and deleting codeSummaryFurther reading
Index
Why subscribe?
Other Books You May EnjoyPackt is searching for authors like you

Content preview from Mastering React Test-Driven Development - Second Edition

5 Adding Complex Form Interactions

It’s time to apply what you’ve learned to a more complicated HTML setup. In this chapter, we’ll test-drive a new component: AppointmentForm. It contains a select box, for selecting the service required, and a grid of radio buttons that form a calendar view for selecting the appointment time.

Combining both layout and form input, the code in this chapter shows how TDD gives you a structure for your work that makes even complicated scenarios straightforward: you will use your tests to grow the component into a component hierarchy, splitting out functionality from the main component as it begins to grow.

In this chapter, we will cover the following topics:

Choosing a value from a select box
Constructing a calendar ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781803247120

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Mastering React Test-Driven Development - Second Edition

by Daniel Irvine

5

Adding Complex Form Interactions

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.