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