Test the methods inside a functional component using react - reactjs

Question

I have the following component and I am trying to test these two methods onHandleClick and onHandleSave for checking the visible states but I am not sure how to achieve this. Can anyone help me with this?
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
export const MyComponent = (props) => {
const {
visible,
setVisible,
products,
setProducts,
} = props;
const onHandleSave = (e, product) => {
e.stopPropagation();
setProducts(product)
setVisible(visible);
};
const onHandleClick = (e, product) => {
e.stopPropagation();
setProducts(product);
setVisible(!visible);
};
const onToggle = () => {
setVisible(!visible);
};
const mapProducts = () => {
if (products === undefined) {
return [];
}
return products.sort().map((product, key) => (
<Modal
className="product-option"
id="product"
key={key}
onClick={(e) => onHandleClick(e, product)}
>
{product.text}
<div className="set-default">
<span role="button" id="save-selection" tabIndex="0" onClick={(e) => onHandleSave(e, product)} aria-hidden="true" className="hovered-icon">
<Tooltip className="tooltip-content">
<small>Save</small>
</Tooltip>
</span>
</div>
</Modal>
));
};
return (
<div className="wrapper">
<button
className="products"
onClick={onToggle}
id="products"
>
{selectedItem.text}
</ button>
{visible && (
<Modal>
<div className="product-content">{mapProducts()}</div>
</Modal>
)}
</div>
);
};
export default MyComponent;
So far, I have tried to write the test like this:
import React from 'react';
import { shallow, shallowWithIntl } from 'enzyme';
import { MyComponent } from '.';
describe('<Product />', () => {
let props;
let wrapper;
beforeEach(() => {
props = {
visible: true,
setVisible: jest.fn(() => 'setVisible'),
onToggle: jest.fn(() => 'onToggleCurrency'),
onHandleClick: jest.fn(() => 'onHandleClick'),
onHandleSave: jest.fn(() => 'onHandleSave'),
};
wrapper = shallow(<MyComponent {...props} />);
});
it('check for visibility states', () => {
wrapper = shallow(<MyComponent {...props} />);
wrapper.instance().onHandleSave = jest.fn();
wrapper.instance().forceUpdate();
expect(wrapper.instance().onHandleSave).toBeCalledWith({ visible: true });
});
But no luck as the test fails. Any helps would be highly appreciated. Thanks in advance

Answer 1

Accessing the internal functions this way will not work, because you don't have access to the scope inside the function. These consts are technically private!
You could do it otherwise and make them accessible, but I wouldn't recommend you to do that. I'd recommend you to test from a perspective which is as close to the user's experience:
The user clicked the save -> Unit test needs to assert that the callback to setVisible and setProducts was called correctly. By accessing the mocks on props.setVisible (for example), you will be able to assert that this was called.
For further reading: https://www.stevethedev.com/blog/programming/public-private-and-protected-scope-javascript
So what you would be looking for actually is a way to click the button. Using Enzyme, you'll find plenty of resources in the net on how to do that.
Since you asked, you could make these functions accessible by setting them as class methods, adding them to the prototype, or by setting them as attributes of the component function-object:
const myFunction = () => {}
myFunction.foo = 'bar'
// you can now access myFunction.foo, as in JavaScript even a function
// is an object
To my experience you should refrain from doing so, but since you asked, here's an answer.