Как правильно протестировать компонент реакции?

Question

Я не эксперт в отношении модульного тестирования, и я пытаюсь достичь 100% -ного охвата моего проекта-пустышки todoapp, его простых для простых компонентов, таких как компонент TodoList, но как насчет компонента AddTodo?

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) 

Это мой текущий тест AddTodo:

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() 
}) 

Этот тест даст произвести следующие покрытия: Stmts 62.5, филиал 100, Funcs 25, Линии 62,5.

непокрытых линий являются: 12, 16, 21.

Как я должен проверить их правильно? Что мне не хватает? Есть некоторые ресурсы там по теме?

---

Я, наконец, решил свою проблему, отметьте, что целью было достижение 100% -ного охвата и ничего больше.

Это мое решение:

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

В handleSubmit и handleChange функции не называется, поэтому отчет охвата говорит, что эти линии не охвачены.

Поскольку у вас уже есть enzyme, вы можете использовать его для simulate событий, которые запускают эти обработчики.

Например:

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

Answer 2

Я не знаком с Перекомпонуйте, но я предполагаю, что ваш непроверенный код в функцию обратного вызова onChange и onSubmit и что setValue и addTodo реквизит вашего компонента. Чтобы проверить это, вам необходимо передать их как шпионов, созданных с помощью jest.fn(), в ваш компонент. Затем вы должны вызвать onChange и onSubmit, и тест на шпионах, что они были вызваны с правильными аргументами

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') 

})