zpratt / react-tdd-guide

A series of examples on how to TDD React

react-tdd-guide

A series of examples on how to TDD React

Getting started

1. install nvm

• Grab an editor or IDE. I recommend Webstorm, Atom, and VIM, in that order.
• git clone ...
• nvm install 4 OR if v4 of node.js is installed, nvm use
• npm i

How to use this guide

Each section is broken out into its own folder, starting with basics. What you'll find there is the finished example. I am experimenting with using the commit history and comments to drive the guide itself. Feedback on whether this works or not would be appreciated.

Each commit that is suffixed with "- red" can be checked out separately to examine the failing test. Each commit that is suffixed with "- green" shows how I finally passed the failing assertion.

Looking at the history for each section will show you only the steps needed to drive that part of the application.

Philosophy

• Avoid the need for runners and browsers
  • Achieved by using jest and react-testing-library

Table of Contents

• Basics - Steps for TDD'ing the simplest of React components: An unordered list of items. Start here if you're not familiar with TDD'ing React and want to see a simple introduction.
  • Running version
• Simple event handling (WIP)
• Simple stateful input
• Centralized state management techniques (not done)
• Redux (not done)
• React router (not done)

Running the tests for a section

• npm run <section name>

Running all tests

• npm test

Contributing

Please feel free to open an issue for:

• A question on how to do something
• A request for further clarification

Use a pull request for

• Suggestions on changing how something is tested
• To add an example you think would be valuable

Caveats

I am not a windows user, therefore this has only been tested on OSX.

react-tdd-guide's Issues

Switch to using the shallow renderer exclusively

Convert tests to use es6 more extensively

Add a change log to keep track of URIs/commits

Hi Zach,

Great guide :) I really like the way you're using commits to document stuff, very clever! Let's see how inline commenting on those plays out.

Have you thought about adding a change log and applying some versioning/tagging scheme?
That would give you, on a per commit basis, the ability to build up a list of snippets with their solution. Tagging would also make it easier to reference the code in an easier to read way.

Darío

Update tests to use enzyme instead of shallow rendering directly

Upgrade to react 0.14

Use mocha.opts instead of documenting editor specific settings

Use a more strict eslint configuration

Use babel for transpiling jsx

Add a Travis CI build

Since this repo is about tdd, it would be a good example to also show CI that runs tests on every push.