How I Test React

A small demonstration that intros how I test React. This is a completely introductory talk first presented at React Brisbane in February.

The demo code can be found at https://github.com/deecewan/react-testing-demo. The code all starts commented.

Transcript

1. How I Test React David Buchan-Swanson @deecewan everywhere
2. What I’m Going To Cover - How I started. What tools I used. What worked, what didn’t - My progression - My current setup - A (hopefully) flawless live demo Assumed knowledge - React, at least a little - I won’t be covering how any of that side of it works - ES2015+ syntax - If anything is super unfamiliar, feel free to ask about it, but generally it should make sense
3. Where I Started - Mocha + Chai - Early JS testing, before React - Something new -> Ava - import test from ‘ava’; - test(‘1 should be 1’, t => t.is(1, 1)) // a passing test in ava!
4. Where I am now - Jest - Test runner with built-in assertion library (Jasmine) - Enzyme - An amazing library by Airbnb for testing React components
5. Quick Testing Overview - I keep my tests right next to my code - App.jsx sits right next to App.test.jsx - I write my code, then my tests - I personally don’t like TDD. To each their own - I separate my concerns, and try to not mix display components with logic components - I also use Redux to handle the vast majority of my logic, so that for the most part, my components just display
6. Live Demo - Use an existing React component. - Write tests for it using Jest + Enzyme. - Have a look at how else we might test a React component - Jest testing - Manually (please no) Wish me luck...