Test input element click invocation when label is clicked - reactjs

Question

I want to test a scenario where an input component (radio/ checkbox) click event is invoked when the label is clicked. Following is my code,
Toggle.jsx
import * as React from 'react'; // eslint-disable-line import/no-extraneous-dependencies
import styled from 'styled-components'; // eslint-disable-line import/no-extraneous-dependencies
import Label from '../Label/Label';
const ToggleButtonController = styled.button`
background-color: red;
`;
const ToggleInputController = styled.input`
background-color: red;
`;
const Toggle = (props) => {
const { label } = props;
let toggleControllerRef = null;
const renderLabel = () => {
return (
<Label
onClick={() => { toggleControllerRef.click(); }} // <--- untested line where I invoke the input element click event on label click
>
{ label }
</Label>
);
};
const renderController = () => {
const { labelPosition, disabled, type, onClick, onChange } = props;
let controller = (
<div>
<ToggleInputController
onClick={onClick}
onChange={onChange}
innerRef={(toggleController) => { toggleControllerRef = toggleController; }}
type={type === 'switch' ? 'checkbox' : type}
disabled={disabled}
/>
</div>
);
if (type === 'button') {
controller = (
<div>
<ToggleButtonController
onClick={onClick}
disabled={disabled}
{...commonUtils.filterProps(Toggle.propTypes, props)}
>
{ label }
</ToggleButtonController>{ renderRequired() }
</div>
);
}
return controller;
};
return (
<div>
{
renderController()
}
</div>
);
};
export default Toggle;
toggle.test.js
import React from 'react';
import { shallow } from 'enzyme';
import { Toggle } from '../src/index';
describe('Test Toggle component', () => {
it('Test checkbox element label click event', () => {
const mockCallBack = jest.fn();
const toggle = shallow(<Toggle type="checkbox" onClick={mockCallBack} label="test" />);
toggle.find('Label').last().get(0).click; // i want to trigger onClick in the above Toggle when the label is clicked
expect(mockCallBack).toHaveBeenCalled();
});
});
With this code snippet, the test fails stating the mockCallBack was not called.
This is the first time im testing UI elements and would appreciate a point in the right direction to achieve this requirement.
Thanks

Answer 1

There are a couple of details you should consider to write this test.
Simulating events
In order to simulate events, Enzyme wrappers provide the .simulate method:
wrapper.find('a').simulate('click');
Simulating events with shallow rendering
Simulated events with shallow rendering, don't propagate as expected. Therefore there are at least 2 options:
Keep using shallow render and call .simulate directly on the element bound to the event callback
Switch to Enzyme's full rendering to take advantage on proper events propagation