React+TypeScript+TDD

React is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, its hard to find accurate learning materials.

Adding in testing? Not so much. That three-part combination is the topic of this series. We’ll show a little about a lot. Meaning, the key steps to getting productive, in TDD, for React projects using TypeScript.

Code

The finished code for this tutorial step is on GitHub.

You can browse a rendered version of these docs at:

https://react-typescript-tdd.firebaseapp.com

• Project Setup
  • Project Creation
  • Show Me a Page
  • Production Build
  • This Is Only a Test
  • Conclusion
• Project Cleanup
  • Clean Up, Clean Up
• Styling with TSLint
  • Configuring the Configuration
• Unit Testing with Jest and Enzyme
  • Pretty Jest
  • Fail Faster
  • TDD Basics
  • A Real Test
• Debugging During Testing With NodeJS
  • Cleanup
  • Hello Parameter
  • Stop at Breakpoint
• Debugging JSX With Chrome
  • Make a Run Configuration
  • Browser Debug
  • Clean Up
• JSX and ES6
  • Cleanup
  • Classes and Fields
  • Arrow Functions
  • Move To a Method
  • JSX
  • Note About Arrow Functions
• Functional React Components in TypeScript
  • Prep
  • Tiny Heading Component
  • Point Parent at Child Component
  • Single Responsibility Principle
  • Adding TypeScript
• Sharing Component Props Using Type Information
  • Hello Recipient
  • Default Prop
• Class Components With Props
  • First a Test
  • Pass In a Prop
  • Wire Into UI
• Model Class State With TypeScript Interfaces
  • Always Start With a Test
  • Starting Value
  • Wire Into UI
• Rich Events and Testing
  • First Failing Test
  • onClick Handler
  • Advance By Ten with Shift-Click
• Presentation and Container Components
  • Counter State
  • Passing In Click Function
  • Dumb Component Gets a Little Smarter
  • Updating the Container
  • Test the State Updater
  • Testing Is Cool