TDD / BDD React.js

List of all TDD / BDD React.js related tutorials / links / repos / slides

There seems to be little information about how to approach TDD/BDD when it comes to React.js.

Original question on StackOverflow

If you would like to add more just send a PR or start an issue =)

tutorials:

• How React Components Make UI Testing Easy - (git) - by (Swizec)
• Testing React Component - great tutorial and gifs!
• React TDD Example - Jest/Gulp/React Test Utils. Unit Testing and Building a React Component (shidhincr)
• TDD with karma on React components - Karma/Webpack. Tutorial not complete more to come. (dtryon)
• Approaches to testing React components - an overview
• Unit Testing React Components: Jest or Enzyme?

Videos / Screencasts:

• react-bootstrap's test suite running with Karma - (3:45) (winkler1)

Repos/Git:

• react-tdd-guide - Mocah/Chai/JsDom, plenty here but only valid for io.js because of JsDom use. (zpratt)
• Unit testing React components without a DOM A simple example of unit testing two React components in Mocha with shallow rendering. (simonsmith)

Testing:

• Webpack
  • Testing React and Flux applications with Karma and Webpack - (tutorial) - (git) - (kentor)
  • How to test React components using Karma and webpack - (tutorial) - (necolas)
  • Testing ReactJS Components with Karma and Webpack - (tutorial) - (git) - (justinwoo)
  • Testing a react project with Karma and Webpack - (tutorial) - Chris Harrington
  • in-flux - (git) - Karma/Webpack/Babel. Great examples of testing - (nkbt)
• Gulp
  • Unit Testing - (tutorial) Gulp/Jasmine/Karma
• Jest
  • Using Test Driven Development with React.js to Add Multi-Select to the Drag and Drop Component - (tutorial) - (HurricaneJames)
• Huxley
  • Testing React components - (tutorial) - with Huxley - (wereHamster)
• Mocha
  • Automated testing in Yahoo Mail - (blog post from Yahoo) - (@ankitshah2787)
• Redux
  • Async Redux testing - (github example) - (@ruffle1986)

Shallow Rendering:

• Unit testing React components without a DOM
• Shallow Rendering (oficial docs)
• react-shallow-testutils- Replacement for TestUtils when using React's shallow rendering

Facebook/React Docs

• Test Utilities - React.addons.TestUtils
• Jest - Facebook's testing enviroment based on Jasmine
• Testing Flux Applications - tutorial

Testing enviroment comparisons:

• Testing with ReactJS at Codecademy - Karma + Jasmine vs Jest (100x faster than Jest)
• Testing React Web Apps with Mocha

Various Suites

• Boilerplate for bdd / tdd / testing with Tape + Testem + Webpack + Babel + React