Implement TDD for your React applications using Jest, React Router, Redux, and GraphQL/Relay. Learn BDD and end-to-end acceptance testing with CucumberJS and Puppeteer.
Key FeaturesLearn the TDD process using the React frameworkBuild complex, real-world applications with a pragmatic approach to TDDUse Cucumber for acceptance and BDD testing, bringing TDD to the wider team Book DescriptionMany programmers are aware of TDD but struggle to apply it beyond basic examples. This book teaches how to build complex, real-world applications using Test-Driven Development (TDD). It takes a first principles approach to the TDD process using plain Jest and includes test-driving the integration of libraries including React Router, Redux, and Relay (GraphQL).
Readers will practice systematic refactoring while building out their own test framework, gaining a deep understanding of TDD tools and techniques. They will learn how to test-drive features such as client- and server-side form validation, data filtering and searching, navigation and user workflow, undo/redo, animation, LocalStorage access, WebSocket communication, and querying GraphQL endpoints.
The book covers refactoring codebases to use the React Router and Redux libraries. via TDD. Redux is explored in depth, with reducers, middleware, sagas, and connected React components. The book also covers acceptance testing using Cucumber and Puppeteer.
The book is fully up to date with React 16.9 and has in-depth coverage of hooks and the ‘act’ test helper.
What you will learnBuild test-driven applications using React 16.9+ and JestBuild complete web applications using a variety of HTML input elementsUnderstand the different types of test double and when to apply themTest-drive the Integration of libraries such as React Router, Redux, and Relay (GraphQL)Learn when to be pragmatic and how to apply TDD shortcutsTest-drive interaction with browser APIs including fetch and WebSocketUse Cucumber.js and Puppeteer to build BDD-style acceptance tests for your applicationsBuild and test async Redux code using redux-saga and expect-reduxWho this book is forThe target audience for this book is JavaScript developers who are looking to implement test-driven and behavior-driven approaches for their React applications.
Table of ContentsFirst Steps with Test-Driven DevelopmentTest-driving Data Input with ReactExploring Test DoublesCreating a User InterfaceHumanizing FormsFiltering and Searching DataTest-driving React RouterTest-driving ReduxTest-driving GraphQLBuilding a Logo InterpreterAdding AnimationWorking with WebSocketsWriting Your First Acceptance TestAdding Features Guided by Acceptance TestsUnderstanding TDD in the Wider Testing Landscape
Coming from a decent TDD background, this was quite a poor read. I had one question coming in and the book completely failed to answer it: how do you structure frontend code in a way that ensures adherence to SOLID principles? If you're not doing SOLID, then you're only doing incomplete TDD - and somehow that seems OK with the author.
The book does a great job of explaining how to test things in React, so if you're new to frontend testing and want to understand how to write basic tests and grasp what is going on under the hood, this is a decent read. My main gripe is that it fails to observe basic software engineering principles such as the single responsibility principle. For instance, the author is happy to test a React component that makes HTTP requests and displays the results - even if these are clearly two separate responsibilities that should live in two different pieces of code. This book gives you the tools you need, but does not really explain when or how you should best use them.
If you actually want to understand how TDD becomes a tool that can help you better organize your code and make it resilient to change, I would recommend Alan Mellor's "Test-Driven Development with Java". Yes, it's about Java, but the principles it shows are transferrable to every other programming language. Meanwhile, my search for a book that teaches readers how to write clean, maintainable frontend code carries on.