How to test a react component properly?

Question

I'm not an expert about unit testing, and i'm trying to achieve 100% coverage on my dummy todoapp project, its easy for simple components like a TodoList component, but what about the AddTodo component?

import React, {PropTypes} from 'react'
import {compose, withState, withProps} from 'recompose'

/**
* Form to create new todos.
*/

const enhance = compose(
  withState('value', 'setValue', ''),
  withProps(({value, setValue, addTodo}) => ({
    handleSubmit: e => (
      e.preventDefault(),
      addTodo(value),
      setValue('')
    ),
    handleChange: e => setValue(e.target.value),
  }))
)

const Component = ({value, handleSubmit, handleChange}) =>
  <form onSubmit={handleSubmit}>
    <input
      type="text"
      value={value}
      onChange={handleChange}
    />
    <input type="submit" value="add"/>
  </form>

Component.displayName = 'FormNewTodo'
Component.propTypes = {
  value: PropTypes.string.isRequired,
  handleSubmit: PropTypes.func.isRequired,
  handleChange: PropTypes.func.isRequired,
}

export default enhance(Component)

This is my current AddTodo test:

import React from 'react'
import {shallow} from 'enzyme'
import FormNewTodo from './index'

test('it should render properly', () => {
  const wrapper = shallow(<FormNewTodo value="something"/>)

  expect(wrapper).toMatchSnapshot()
})

That test give produce the following coverage: Stmts 62.5, Branch 100, Funcs 25, Lines 62.5.

The uncovered Lines are: 12, 16, 21.

How should I test them correctly? What i'm missing? There are some resources out there about the topic?

---

I've finally solved my problem, note that the goal was to achieve 100% coverage and nothing else.

This is my solution:

import React from 'react'
import {shallow} from 'enzyme'
import FormNewTodo from './index'

test('<FormNewTodo/>', () => {
  const preventDefault = jest.fn()
  const addTodo = jest.fn()
  const subject = shallow(
    <FormNewTodo
      addTodo={addTodo}
    />
  )

  subject.dive()
    .find('[type="text"]')
    .simulate('change', {target: {value: 'woot'}})

  subject.dive()
    .simulate('submit', {preventDefault})

  expect(preventDefault).toHaveBeenCalled()
  expect(addTodo).toHaveBeenCalled()
})

Answer 1

The handleSubmit and handleChange functions are not called, so the coverage report says these lines are not covered.

Because you've already enzyme, you can use it to simulate the events which trigger those handlers.

For example:

wrapper.find('input').simulate('click') // trigger handleChange
wrapper.find('form').simulate('submit') // trigger handleSubmit

Answer 2

I'm not familiar with recompose but I assume that your untested code are the onChange and onSubmit callback function and that setValue and addTodo are props of your component. To test this you need to pass them as spies, created with jest.fn(), in to your component. Then you have to trigger onChange and onSubmit, and test on the spies that they were called with the correct arguments

test('it submits the form', () => {
  //create the spies for your callbacks
  const setValue = jest.fn()
  const addTodo = jest.fn()

  //pass them to your rendered component
  const wrapper = shallow(
    <FormNewTodo 
      value="something" 
      setValue={setValue} 
      addTodo={addTodo}
    />
  )
  //create a spy for your fake event
  const preventDefault = jest.fn()
  //trigger the submit by just calling the prop
  wrapper.trigger.prop('onSubmit')({preventDefault})
  //check that the functions are called with correct parameter
  expect(preventDefault).toHaveBeenCalled()
  expect(setValue).toHaveBeenCalledWith('')
  expect(addTodo).toHaveBeenCalledWith('something')

})