'Testing props.onChange with Jest

I've been trying to create a test case for a component. The component has a function that changes the props. When I can't cover the four lines of code for the handleClick function.

Can I cover these lines and get 100% coverage for the component? If so, how? The mocks don't seem to cover these lines from what I could tell. I can get the test to pass, but I have to ignore these lines.

I'm also using React 16, and I use props drilling.

ThankYouForYourFeedback.js

import React, { useContext, useState } from 'react';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import ClipboardClip from './../ClipboardClip';
import axios from 'axios';

function ThankYouForYourFeedback(props) {
    const handleClick = (e) => {  
        e.preventDefault();
        props.onChange(props.props.className = [""]);//Provide a thank you for providing your feedback clipboard right here. 
    };
    return (
        <div id="thankYouForYourFeedbackClipboard" className={props.className}>
            <Form className="form" >
                <ClipboardClip />
                <div className="centeredPaper">
                    <p>Thank you for your feedback.
                        We will reach out to you if we need any further information
                        or if we would like to use your recommendation in our reviews.</p>
                    <Button id="thankYouForYourFeedbackDismiss" name="thankYouForYourFeedbackDismiss" type="" onClick={handleClick} >
                        Thank You
                    </Button>
                </div>
            </Form>
        </div>
    );
}
export default ThankYouForYourFeedback;

ThankYouForYourFeedback.test.js

import React from 'react';
import renderer from 'react-test-renderer';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import ClipboardClip from './../ClipboardClip';
import ThankYouForYourFeedback from './ThankYouForYourFeedback';
import { configure, shallow, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

jest.mock('./ThankYouForYourFeedback');

describe('ThankYouForYouFeedback Component', () => {
    it('should render correctly', () => {
        const onClick = jest.fn();
        const ThankYouForYourFeedbackTest = renderer
            .create(
                <div id="thankYouForYourFeedbackClipboard">
                    <Form className="form" >
                        <ClipboardClip />
                        <div className="centeredPaper">
                            <p>Thank you for your feedback.
                                We will reach out to you if we need any further information
                                or if we would like to use your recommendation in our reviews.</p>
                            <Button id="thankYouForYourFeedbackDismiss" name="thankYouForYourFeedbackDismiss" type="" onClick={onClick} >
                                Thank You
                            </Button>
                        </div>
                    </Form>
                </div>
            )
            .toJSON();
        expect(ThankYouForYourFeedbackTest).toMatchSnapshot();
    });
    it('find the button to click and find the props', () => {
        //console.log('These are the props when trying to test the button. ' + props);
        const thankYouClick = jest.fn();
        const handleClick = (e) => {
            e.preventDefault();
            props.onChange(props.props.className = [""]);//Provide a thank you for providing your feedback clipboard right here. 
        };


        const wrapper = mount(
            <div id="thankYouForYourFeedbackClipboard" className={props.className}>
                <Form className="form" >
                    <ClipboardClip />
                    <div className="centeredPaper">
                        <p>Thank you for your feedback.
                            We will reach out to you if we need any further information
                            or if we would like to use your recommendation in our reviews.</p>
                        <Button id="thankYouForYourFeedbackDismiss" name="thankYouForYourFeedbackDismiss" type="" onClick={handleClick} >
                            Thank You
                        </Button>
                    </div>
                </Form>
            </div>);
        wrapper.find('Button[name="thankYouForYourFeedbackDismiss"]').simulate('click', thankYouClick);
        //expect(thankYouClick.mock.calls.length).toEqual(1);
        expect(wrapper.find(props.props.className)).to.have.lengthOf(0);

    })
})


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source