反応成分を正しく試験するには？

Question

私は単体テストについての専門家ではありません。私は、TodoListコンポーネントのような単純なコンポーネントのための簡単なダミーのtodoappプロジェクトで100％のカバレッジを達成しようとしていますが、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関数が呼び出されません正しい引数で呼び出されたことをスパイにonChangeとonSubmit、およびテストをトリガする必要があります。

既にenzymeになっているので、それをsimulateに送信して、それらのハンドラをトリガするイベントを使用することができます。例えば

：

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

Answer 2

私は再構成に慣れていないんだけど、私はあなたのテストされていないコードがonChangeとonSubmitコールバック関数であり、setValueとaddTodoは、コンポーネントの小道具であることをことを前提としています。これをテストするには、jest.fn()で作成されたスパイとしてコンポーネントに渡す必要があります。その後、カバレッジレポートは、これらの行がカバーされていないと言うように、彼らは、

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

})