Building React apps with test-driven development (TDD)

Learn how to use test-driven development to build React apps, with a minimalist approach.
Presented at LeedsJS - https://www.meetup.com/LeedsJS/

Transcript

1. Building React apps
 with Test-Driven Development Daniel Irvine 8th Light ReactTDD.com 31 January 2018
2. My style Opinionated Minimalist Steady
3. ReactTDD.com Daniel Irvine I’m aiming to… • teach you the coding techniques I use when building React applications,
 • convince you that strict Test-Driven Development (TDD) is worth using, and
 • show you how programming from first principles is rewarding, educational and promotes high-quality code.
5. ReactTDD.com Daniel Irvine Ingredient lists • ½ pound green peas •1 cabbage lettuce • 1 onion • 1 tablespoon chopped mint • ½ teaspoon salt • puff pastry [{ "name": "green peas", "amount": 0.5, "measure": "pound" }, { "name": "cabbage lettuce", "amount": 1 }, { "name": "onion", "amount": 1 }, { "name": "chopped mint", "amount": 1, "measure": "tablespoon" }, { "name": "salt", "amount": 0.5, "measure": "teaspoon" }, { "name": "puff pastry" }]
6. The function we want to craft… ingredientLister.js
 
 export function formatIngredientRequirement(
 ingredientFinder, measureFinder, ingredient) { // ? }
7. ReactTDD.com Daniel Irvine ingredientListerSpec.js - making a start import { formatIngredientRequirement } from '~/ingredientLister' it('formats a single whole item', () => { const actual = format({name: 'onion', amount: 1}) expect(actual).toEqual('1 onion') }) function format(item) { return formatIngredientRequirement( ingredientFinder, measureFinder, item) }
8. Start simple ingredientLister.js
 
 export function formatIngredientRequirement(
 ingredientFinder, measureFinder, ingredient) { return '1 onion’ }
9. ReactTDD.com Daniel Irvine Testing with Jasmine it('formats multiple whole items', () => { const actual = format({name: 'onion', amount: 2}) expect(actual).toEqual('2 onions') }) function format(item) { return formatIngredientRequirement( ingredientFinder, measureFinder, item) }
10. ReactTDD.com Daniel Irvine Testing with Jasmine it('formats multiple whole items', () => { const ingredientDetail = {singular: 'onion', plural: 'onions'} ingredientFinder = _ => ingredientDetail const actual = format({name: 'onion', amount: 2}) expect(actual).toEqual('2 onions’) }) function format(item) { return formatIngredientRequirement( ingredientFinder, measureFinder, item) }
11. Make both tests pass export function formatIngredientRequirement(
 ingredientFinder, measureFinder, ingredient) {
 if(ingredient.amount === 1) {
 return `1 ${ingredient.name}`
 } else {
 const detail = ingredientFinder(ingredient.name)
 return `${ingredient.amount} ${detail.plural}`
 }
 }
12. DRYing up tests import { formatIngredientRequirement } from '~/ingredientLister'
 
 describe('formatIngredientRequirement', () => {
 
 let ingredientFinder
 let measureFinder
 
 it('formats a single whole item', () => {
 // ?
 })
 
 it('formats multiple whole items', () => {
 // ?
 })
 
 function format(item) {
 return formatIngredientRequirement(
 ingredientFinder, measureFinder, item)
 }
 })
13. ReactTDD.com Daniel Irvine Functions
14. ReactTDD.com Daniel Irvine Functions {name: 'onion', 
 amount: 2} 2 onions
15. ReactTDD.com Daniel Irvine Functions {name: 'onion', 
 amount: 2} onion {singular: 'onion', plural: 'onions' } 2 onions
16. ReactTDD.com Daniel Irvine Functions {name: 'onion', 
 amount: 2} onion {singular: 'onion', plural: 'onions' } teaspoon {singular: 'teaspoon', plural: ‘teaspoons' } 2 onions
17. Repeat until you end up with this… export function formatIngredientRequirement(
 ingredientFinder, measureFinder, ingredient) {
 if(ingredient.measure) {
 return formatIngredientWithMeasure(measureFinder, ingredient)
 } else {
 return formatWholeIngredient(ingredientFinder, ingredient)
 }
 }
 
 function formatIngredientWithMeasure(measureFinder, ingredient) {
 const measure = measureFinder(ingredient.measure)
 if(ingredient.amount === 1) {
 return `1 ${measure.singular} ${ingredient.name}`
 } else {
 return `${ingredient.amount} ${measure.plural} ${ingredient.name}`
 }
 }
 
 function formatWholeIngredient(ingredientFinder, ingredient) {
 if(ingredient.amount === 1) {
 return `1 ${ingredient.name}`
 } else {
 const ingredientDetail = ingredientFinder(ingredient.name)
 return `${ingredient.amount} ${ingredientDetail.plural}`
 }
 }
18. Breathe!
19. An example React component import React from 'react'
 import ReactDOM from 'react'
 import Recipe from './recipe'
 
 export default class RecipeList extends React.Component {
 constructor(props) {
 super(props)
 }
 
 render() {
 return <div id='recipeList'>
 <ul>
 {this.props.recipes.map(this.renderRecipe)}
 </ul>
 </div>
 } renderRecipe(recipe) {
 return <li key={recipe}>{recipe}</li>
 }
 }
20. ReactTDD.com Daniel Irvine Mounting a React component import React from 'react' import ReactDOM from 'react-dom' import RecipeList from './recipeList' import { loadAllRecipes } from './recipeRepository' const recipes = loadAllRecipes() ReactDOM.render( <RecipeList recipes={recipes} />, document.getElementById('main'))
21. ReactTDD.com Daniel Irvine Mounting a specific component in tests let container let component beforeEach(() => { container = document.createElement('div') }) function mountComponent() { component = ReactDOM.render( <RecipeList recipeRepository={repository} />, container) }
22. ReactTDD.com Daniel Irvine Working with the DOM export function resetDom(windowUrl) { global.window = new JSDOM('', {url: windowUrl}).window global.document = global.window.document global.navigator = global.window.navigator window.fetch = () => {json: () => ''} } beforeEach(() => { resetDom() })
23. Testing a React component const recipes = ['recipe 1', 'recipe 2']
 
 describe('recipeList', () => {
 let component
 const repository = Promise.resolve(recipes) beforeEach(() => {
 resetDom()
 }) it('initially displays an empty unordered list', () => {
 mountComponent()
 expect(ul()).toBeDefined()
 expect(ul().children.length).toEqual(0)
 })
24. ReactTDD.com Daniel Irvine DRYing up tests with helper methods function ul() {
 return ReactTestUtils
 .findRenderedDOMComponentWithTag(component, 'ul')
 }
25. Let’s view some recipes!
27. ReactTDD.com Daniel Irvine Getting rid of asynchronous behaviour it('test description', (done) => { mountComponent() setImmediate(() => { expect(...) done() }) })
28. ReactTDD.com Daniel Irvine Mixing DOM methods with ReactTestUtils it('renders recipes as links', (done) => { mountComponent() setImmediate(() => { expect(ul().querySelectorAll('li > a').length).toEqual(2) done() }) })
29. ReactTDD.com Daniel Irvine Yet more methods… function click(link) { return ReactTestUtils.Simulate.click(link) } function firstLink() { return ul().querySelectorAll('li > a')[0] }
30. Changing the DOM it('clicking link sets the displayed recipe correctly', (done) => {
 mountComponent()
 setImmediate(() => {
 click(firstLink())
 setImmediate(() => {
 expect(recipe().props.chosenRecipe).toEqual('recipe 1')
 done()
 })
 })
 }) function recipe() {
 return ReactTestUtils
 .findRenderedComponentWithType(component, Recipe)
 }
31. State setup constructor(props) { super(props) this.handleChooseRecipe = this.handleChooseRecipe.bind(this) this.renderRecipe = this.renderRecipe.bind(this) this.state = {} }
32. Using state render() { return <div id='recipeList'> <ul> {this.state.recipes.map(this.renderRecipe)} </ul> <Recipe chosenRecipe={this.state.chosenRecipe} /> </div> } renderRecipe(recipe) { return <li key={recipe}> <a onClick={this.handleChooseRecipe}>{recipe}</a> </li> } handleChooseRecipe(e) { this.setState({ chosenRecipe: e.target.textContent }) }
33. Another use of state constructor(props) { super(props) this.recipesReceived = this.recipesReceived.bind(this) this.props.recipeRepository.then(this.recipesReceived) this.state = { recipes: [] } } recipesReceived(recipes) { this.setState({ recipes: recipes }) }
34. We never test state!
35. Look again at that test it('clicking link sets the displayed recipe correctly', (done) => {
 mountComponent()
 setImmediate(() => {
 click(firstLink())
 setImmediate(() => {
 expect(recipe().props.chosenRecipe).toEqual('recipe 1')
 done()
 })
 })
 }) function recipe() {
 return ReactTestUtils
 .findRenderedComponentWithType(component, Recipe)
 }
36. Only one more difficult thing left…
37. But before that…
38. Arrange Act Assert Test description it('formats multiple whole items', () => { Arrange const ingredientDetail = {singular: 'onion', plural: 'onions'} ingredientFinder = _ => ingredientDetail Act const actual = format({name: 'onion', amount: 2}) Assert expect(actual).toEqual('2 onions') })
39. Red Green Refactor
40. The difficult thing
41. ReactTDD.com Daniel Irvine Test doubles •Fakes - contains ‘business logic’, and needs tests itself •Stubs - always returns the same value •Spies - like a stub but records when it was called Three types:
42. ReactTDD.com Daniel Irvine Test doubles •Fakes - contains ‘business logic’, and needs tests itself •Stubs - always returns the same value •Spies - like a stub but records when it was called Three types:
43. ReactTDD.com Daniel Irvine Stubs let ingriedientFinder it('formats multiple whole items', () => { const ingredientDetail = {singular: 'onion', plural: 'onions'} ingredientFinder = _ => ingredientDetail const actual = format({name: 'onion', amount: 2}) expect(actual).toEqual('2 onions’) }) function format(item) { return formatIngredientRequirement( ingredientFinder, measureFinder, item) }
44. ReactTDD.com Daniel Irvine Example of a React spy - loading recipes Recipe RecipeRepository RecipeList 1 1 recipeLoader
45. First test import { sampleRecipe } from '../sampleData/recipe'
 
 let recipeLoader
 
 beforeEach(() => {
 recipeLoader = jasmine.createSpy()
 .and.returnValue(Promise.resolve(sampleRecipe))
 })
 
 it('loads the recipe using the recipe loader', (done) => {
 mountComponent('Avocado bagel')
 setImmediate(() => {
 expect(recipeLoader).toHaveBeenCalledWith('Avocado bagel')
 done()
 })
 })
46. Use the repository constructor(props) {
 super(props)
 this.doLoad()
 } doLoad() {
 this.props.recipeLoader(this.props.chosenRecipe)
 }
47. Second and third test beforeEach(() => {
 recipeLoader = jasmine.createSpy()
 .and.returnValue(Promise.resolve(sampleRecipe))
 })
 
 it('displays the name of the recipe in a heading', (done) => {
 mountComponent('Avocado bagel')
 setImmediate(() => {
 expect(h2().textContent).toEqual('Avocado bagel')
 done()
 })
 }) it('displays whole ingredients', (done) => {
 mountComponent('Avocado bagel')
 setImmediate(() => {
 expect(textContent()).toContain('1 avocado')
 expect(textContent()).toContain('1 sesame bagel')
 done()
 })
 })
48. Use the repository doLoad() {
 this.props.recipeLoader(this.props.chosenRecipe)
 .then(recipe => {
 this.setState({
 recipe: recipe
 })
 })
 } render() {
 if(this.state.recipe) {
 return <div id='recipe'>
 <h2>{this.props.chosenRecipe}</h2>
 <ul>{this.state.recipe.ingredient
 .map(this.renderIngredient)}
 </ul>
 </div>
 }
49. ReactTDD.com Daniel Irvine Default properties import React from 'react' import ReactDOM from 'react-dom' import { loadRecipe } from './recipeRepository' export default class Recipe extends React.Component { // ... } Recipe.defaultProps = { recipeLoader: loadRecipe }
50. Final topic
51. ReactTDD.com Daniel Irvine Component hierarchies Recipe RecipeRepository RecipeList 1 1 recipeLoader ViewRecipe EditRecipe Ingredient
52. ReactTDD.com Daniel Irvine Component hierarchies Recipe RecipeRepository RecipeList 1 1 recipeLoader ViewRecipe EditRecipe Ingredient This component fetches data
 on load
53. Use spyOn to stub beforeEach(() => {
 resetDom()
 spyOn(Recipe.prototype, 'doLoad')
 })
54. Top tips for refactoring Make a mess Don’t Repeat Yourself - including the tests Get away from React as much as possible Stay functional
55. Top tips for testing Only write the minimum amount of code to pass the test Lots of small connecting methods makes very simple testing Get rid of asynchronous behaviour Don’t access OS resources Spy tests generally comes in pairs - for the call params and for the return value
56. 8th Light is hiring… Especially senior developers 8thlight.com
57. …or, hire us! We build all types of software, with a focus on quality
58. Thank you Sign up at ReactTDD.com for a free course
 that covers all this and more Daniel Irvine
 Email: daniel@danielirvine.com
 Twitter: @d_ir
 Instagram: @craft_of_code
59. ReactTDD.com Daniel Irvine Jasmine API Reference Assertions expect(actual).toEqual(expected) expect(actual).toBeDefined()
 expect(actual).not.toEqual(unexpected) expect(actual).not.toBeDefined() expect(actual).not.toBeNull() // for querySelector expect(string).toContain(substring) For use with spies: expect(spy).toHaveBeenCalled() expect(spy).toHaveBeenCalledWith(argumentOne, argumentTwo, ...)
60. ReactTDD.com Daniel Irvine ReactTestUtils API Reference import ReactTestUtils from 'react-dom/test-utils' ReactTestUtils.findRenderedDOMComponentWithTag(component, 'ul') ReactTestUtils.findRenderedComponentWithType(component, Recipe) ReactTestUtils.findRenderedDOMComponentWithClass(component, cssClassName) ReactTestUtils.scryRenderedDOMComponentsWithTag(component, 'ul') ReactTestUtils.Simulate.change(selectBox, {target: {value: option}} ) ReactTestUtils.Simulate.click(link) node.querySelector('ul') node.querySelectorAll('li')
61. ReactTDD.com Daniel Irvine Jasmine API Reference Spies spyOn(object, functionName).and.returnValue(returnValue) e.g. spyOn(window, 'fetch') .and.returnValue(Promise.resolve({json: () => value})) const mySpy = jasmine.createSpy()