Wie kann man eine Reaktionskomponente richtig testen?

Question

Ich bin kein Experte für Komponententests, und ich versuche 100% Abdeckung auf meinem Dummy Todoapp Projekt zu erreichen, es ist einfach für einfache Komponenten wie eine TodoList Komponente, aber was ist mit der AddTodo Komponente?

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) 

Dies ist mein aktueller 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() 
}) 

Diesen Test geben produzieren die folgende Abdeckung: Stmts 62,5, Ast 100, funcs 25, Linien 62.5.

Die ungedeckten Linien sind: 12, 16, 21

Wie soll ich sie richtig testen? Was ich vermisse? Es gibt einige Ressourcen zum Thema?

Ich habe endlich mein Problem gelöst, beachten Sie, dass das Ziel war, 100% Abdeckung und sonst nichts zu erreichen.

Dies ist meine Lösung:

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

Die handleSubmit und handleChange Funktionen nicht genannt werden, so dass die Abdeckung Bericht sagt, dass diese Linien nicht verdeckt werden.

Da Sie bereits enzyme haben, können Sie die Ereignisse, die diese Handler auslösen, zu simulate verwenden.

Zum Beispiel:

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

Answer 2

ich mit Neuzusammenstellung nicht vertraut bin, aber ich nehme an, dass Ihr nicht getesteten Code sind die onChange und onSubmit Callback-Funktion und dass setValue und addTodo sind Requisiten Ihrer Komponente. Um dies zu testen, müssen Sie sie als Spione, die mit jest.fn() erstellt wurden, an Ihre Komponente übergeben. Dann haben Sie onChange und onSubmit und Test auf die Spione triggern, dass sie mit den richtigen Argumenten aufgerufen wurden

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

})