Фрагмент и тест энзима

Question

У меня есть этот файл, и я хочу его протестировать, но некоторые строки не описаны, как я могу проверить их с помощью Jest и Enzyme в Reactionjs.

const List = props => (
    <div className={styles['comments-list']}>
        <h5 className={styles['comment-header']}>Comments</h5>
        <ul className="collection">
            {props.comments.map(comment =>
                <li className="collection-item avatar" key={comment.id}>
                    <img src={IMG} alt="" className="circle"/>
                    <span className="title"><b>{comment.author}</b></span><br/>
                    <span className={`title ${styles['date-font-size']}`}><i>{formatDate(comment.created_at)}</i></span>
                    <p className={styles['comment-body']}>
                        <br/>
                        {comment.body}
                    </p>
                    <div className="secondary-content">
                        <i className={`material-icons ${styles['icon-red']}`} onClick={event => props.deleteComment(comment.id)}>delete</i>
                        <i className="material-icons" onClick={(e) => {
                            $('#foo').modal('open')
                            props.editComment(comment)
                        }}>edit</i>
                        <i className="material-icons">reply</i>
                    </div>

                </li>)}
        </ul>
    </div>
);

Из приведенного выше фрагмента следующие строки не тестируются, а остальные:

<li className="collection-item avatar" key={comment.id}>

<i className={`material-icons ${styles['icon-red']}`} onClick={event => props.deleteComment(comment.id)}>delete</i>



$('#foo').modal('open')
props.editComment(comment)

Теперь эти строки кода выше - это строки, которые не тестировались в моем проекте, как я могу протестировать их в Jest или Enzyme.

Следующее является одним из испытаний, которые я имею:

it('should test List component', () => {

        wrapper = shallow(
            <List deleteComment='Success!'  editComment={jest.fn} comments={[]} handleChange={jest.fn} body={''} />
        );

        const tree = renderer.create(<List comments={[]}  handleChange={jest.fn} body={''} />).toJSON();
        expect(tree).toMatchSnapshot();
        expect(wrapper.find('li')).toHaveLength(0)

        expect(wrapper.props().deleteComment).toEqual(undefined)
        expect(wrapper.props().editComment).toEqual(undefined)


    });

Answer 1

В вашем тесте вы предоставляете пустой список комментариев comments={[]}, поэтому код внутри props.comments.map никогда не выполняется. Добавьте еще один тест, который проверяет, отображает ли ваш компонент комментарии:

it('should test List component with comments', () => {

    const comments = [
        {
            id: 1,
            author: 'John',
            body: 'Hello world'
        }
    ];

    const wrapper = shallow(
        <List deleteComment='Success!'  editComment={jest.fn} comments={comments} handleChange={jest.fn} body={''} />
    );
});