Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Mastering React Test-Driven Development
  • Table Of Contents Toc
  • Feedback & Rating feedback
Mastering React Test-Driven Development

Mastering React Test-Driven Development

By : Daniel Irvine
4.3 (8)
Buy this Book
close
close
Mastering React Test-Driven Development

Mastering React Test-Driven Development

4.3 (8)
By: Daniel Irvine
Buy this Book

Overview of this book

Test-driven development (TDD) is a programming workflow that helps you build your apps by specifying behavior as automated tests. The TDD workflow future-proofs apps so that they can be modified without fear of breaking existing functionality. Another benefit of TDD is that it helps software development teams communicate their intentions more clearly, by way of test specifications. This book teaches you how to apply TDD when building React apps. You’ll create a sample app using the same React libraries and tools that professional React developers use, such as Jest, React Router, Redux, Relay (GraphQL), Cucumber, and Puppeteer. The TDD workflow is supported by various testing techniques and patterns, which are useful even if you’re not following the TDD process. This book covers these techniques by walking you through the creation of a component test framework. You’ll learn automated testing theory which will help you work with any of the test libraries that are in standard usage today, such as React Testing Library. This second edition has been revised with a stronger focus on concise code examples and has been fully updated for React 18. By the end of this TDD book, you’ll be able to use React, Redux, and GraphQL to develop robust web apps.
Table of Contents (26 chapters)
close
close
close
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Download the color images
Conventions used
Get in touch
Share Your Thoughts
1
Part 1 – Exploring the TDD Workflow
Part 1 – Exploring the TDD Workflow
Free Chapter
2
Chapter 1: First Steps with Test-Driven Development
Chapter 1: First Steps with Test-Driven Development
Technical requirements
Creating a new React project from scratch
Displaying data with your first test
Refactoring your work
Writing great tests
Summary
Further reading
3
Chapter 2: Rendering Lists and Detail Views
Chapter 2: Rendering Lists and Detail Views
Technical requirements
Sketching a mock-up
Creating the new component
Specifying list item content
Selecting data to view
Manually testing our changes
Summary
Exercises
Further reading
4
Chapter 3: Refactoring the Test Suite
Chapter 3: Refactoring the Test Suite
Technical requirements
Pulling out reusable rendering logic
Creating a Jest matcher using TDD
Extracting DOM helpers
Summary
Exercises
Further reading
5
Chapter 4: Test-Driving Data Input
Chapter 4: Test-Driving Data Input
Technical requirements
Adding a form element
Accepting text input
Submitting a form
Duplicating tests for multiple form fields
Summary
Exercises
6
Chapter 5: Adding Complex Form Interactions
Chapter 5: Adding Complex Form Interactions
Technical requirements
Choosing a value from a select box
Constructing a calendar view
Test-driving radio button groups
Reducing effort when constructing components
Summary
Exercises
Further reading
7
Chapter 6: Exploring Test Doubles
Chapter 6: Exploring Test Doubles
Technical requirements
What is a test double?
Submitting forms using spies
Spying on the fetch API
Stubbing fetch responses
Migrating to Jest’s built-in test double support
Summary
Exercises
Further reading
8
Chapter 7: Testing useEffect and Mocking Components
chevron up
Chapter 7: Testing useEffect and Mocking Components
Technical requirements
Mocking child components
Fetching data on mount with useEffect
Building matchers for component mocks
Variants of the jest.mock call
Summary
Exercises
Further reading
9
Chapter 8: Building an Application Component
Chapter 8: Building an Application Component
Technical requirements
Formulating a plan
Using state to control the active view
Test-driving callback props
Making use of callback values
Summary
Exercises
10
Part 2 – Building Application Features
Part 2 – Building Application Features
11
Chapter 9: Form Validation
Chapter 9: Form Validation
Technical requirements
Performing client-side validation
Handling server errors
Indicating form submission status
Summary
Exercises
Further reading
12
Chapter 10: Filtering and Searching Data
Chapter 10: Filtering and Searching Data
Technical requirements
Displaying tabular data fetched from an endpoint
Paging through a large dataset
Filtering data
Performing actions with render props
Summary
Exercises
13
Chapter 11: Test-Driving React Router
Chapter 11: Test-Driving React Router
Technical requirements
Designing React Router applications from a test-first perspective
Testing components within a router
Testing router links
Testing programmatic navigation
Summary
Exercise
Further reading
14
Chapter 12: Test-Driving Redux
Chapter 12: Test-Driving Redux
Technical requirements
Up-front design for a reducer and a saga
Test-driving a reducer
Test-driving a saga
Switching component state for Redux state
Summary
Exercise
Further reading
15
Chapter 13: Test-Driving GraphQL
Chapter 13: Test-Driving GraphQL
Technical requirements
Compiling the schema before you begin
Testing the Relay environment
Fetching GraphQL data from within a component
Summary
Exercises
Further reading
16
Part 3 – Interactivity
Part 3 – Interactivity
17
Chapter 14: Building a Logo Interpreter
Chapter 14: Building a Logo Interpreter
Technical requirements
Studying the Spec Logo user interface
Undoing and redoing user actions in Redux
Saving to local storage via Redux middleware
Changing keyboard focus
Summary
Further reading
18
Chapter 15: Adding Animation
Chapter 15: Adding Animation
Technical requirements
Designing animation
Building an animated line component
Animating with requestAnimationFrame
Canceling animations with cancelAnimationFrame
Varying animation behavior
Summary
Exercises
19
Chapter 16: Working with WebSockets
Chapter 16: Working with WebSockets
Technical requirements
Designing a WebSocket interaction
Test-driving a WebSocket connection
Streaming events with redux-saga
Updating the app
Summary
Exercises
Further reading
20
Part 4 – Behavior-Driven Development with Cucumber
Part 4 – Behavior-Driven Development with Cucumber
21
Chapter 17: Writing Your First Cucumber Test
Chapter 17: Writing Your First Cucumber Test
Technical requirements
Integrating Cucumber and Puppeteer into your code base
Writing your first Cucumber test
Using data tables to perform setup
Summary
22
Chapter 18: Adding Features Guided by Cucumber Tests
Chapter 18: Adding Features Guided by Cucumber Tests
Technical requirements
Adding Cucumber tests for a dialog box
Fixing Cucumber tests by test-driving production code
Avoiding timeouts in test code
Summary
Exercise
23
Chapter 19: Understanding TDD in the Wider Testing Landscape
Chapter 19: Understanding TDD in the Wider Testing Landscape
Test-driven development as a testing technique
Manual testing
Automated testing
Not testing at all
Summary
Further reading
24
Index
Index
Why subscribe?
25
Other Books You May Enjoy
Other Books You May Enjoy
Packt is searching for authors like you

Variants of the jest.mock call

Before we finish up this chapter, let’s take a look at some variations on the jest.mock call that you may end up using.

The key thing to remember is to keep your mocks as simple as possible. If you start to feel like your mocks need to become more complex, you should treat that as a sign that your components are overloaded and should be broken apart in some way.

That being said, there are cases where you must use different forms of the basic component mock.

Removing the spy function

To begin with, you can simplify your jest.mock calls by not using jest.fn:

jest.mock("../src/AppointmentsDayView", () => ({
  AppointmentsDayView: () => (
    <div id="AppointmentsDayView" />
  ),
}));

With this form, you’ve set a stub return value, but you won’t be able to spy on any props. This is sometimes useful if, for example, you’ve got multiple files...

Unlock full access

Continue reading for free

A Packt free trial gives you instant online access to our library of over 7000 practical eBooks and videos, constantly updated with the latest in tech
Start a 7-day FREE trial
End of Section 6
Next Section
bookmark search playlist download
font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY