score:1

Accepted answer

You pass your User component a mock function (jest.fn()) through its handleFollowClick and handleStarClick props, then simulate whatever is supposed to trigger the parent action (a click event on the <button /> or a change event on the <input />) and test whether the corresponding mock function was called.

I personally always use Enzyme for this sort of thing, but here's how I'd assume it works using react-test-renderer based on this answer:

const mockFollowClick = jest.fn();
const mockStarClick = jest.fn();

const tree = renderer.create(<User
    {...users[0]}
    handleFollowClick={mockFollowClick}
    handleStarClick={mockStarClick}
/>)

const button = tree.root.findByType('button');
const input = tree.root.findByType('input');

button.props.onClick();
expect(mockFollowClick).toHaveBeenCalled();

input.props.onChange();
expect(mockStarClick).toHaveBeenCalled();

You can even check if it was called with the correct user id:

button.props.onClick();
expect(mockFollowClick).toHaveBeenCalledWith("5d552d0058f193f2795fc814");

Related Query

More Query from same tag