Testing some todos with Jest

todosTest.js

import React from 'react'
import renderer from 'react-test-renderer'

import Todos from '../Todos'

it('should render an empty component', () => {
  const tree = renderer.create(
    <Todos />
  ).toJSON()

  expect(tree).toMatchSnapshot()
})

it('should render a list of todos', () => {
  const todos = [
    {
      text: 'something to do',
      done: false
    },
    {
      text: 'something else',
      done: false
    },
  ]

  const tree = renderer.create(
    <Todos todos={todos} />
  ).toJSON()

  expect(tree).toMatchSnapshot()
})

it('should add a todo to a list of todos', () => {
  const component = renderer.create(
    <Todos />
  )

  // Creates a first snapshot
  let tree = component.toJSON()
  expect(tree).toMatchSnapshot()

  // Select input field
  const todoInputContainer = tree.children.filter(child => child.type === 'div')[0]
  const todoInput = todoInputContainer.children.filter(child => child.type === 'input')[0]

  // Select button
  const todoButton = todoInputContainer.children.filter(child => child.type === 'button')[0]

  todoInput.props.onChange({ target: { name: 'input', value: 'Some new todo' } })
  todoButton.props.onClick()

  tree = component.toJSON()
  expect(tree).toMatchSnapshot()
})

it('should mark an item as done on item click', () => {
  const todos = [
    {
      text: 'something to do',
      done: false
    },
    {
      text: 'something else',
      done: true
    },
  ]
  const component = renderer.create(
    <Todos todos={todos} />
  )

  const tree = component.toJSON()
  expect(tree).toMatchSnapshot()
})