I'm writing a test for this component.
<div>
<label className='switch me-4' htmlFor={`checkbox-${props.idx}`}>
<input id={`checkbox-${props.idx}`} type="checkbox" defaultChecked={props.defaultChecked} onChange={props.onChange} />
<span className='slider round'></span>
</label>
{props.label}
</div>
I want to assert that the checked attribute is present when passing in the prop defaultChecked={true} as this is the case in the actual browser.
let onChange: jest.Mock<any, any>;
beforeEach(() => {
jest.clearAllMocks();
onChange = jest.fn();
});
test('Renders true.', () => {
const component = shallow(<ToggleSwitch
onChange={onChange}
idx={1}
defaultChecked={true}
/>);
let toggled = component.find({ type: 'checkbox' });
expect(toggled).toBeChecked()
})
I've also tried expect(toggled.props().checked).toEqual(true).
The problem seems to be that the checked attribute does not exist in the props but everything I've read indicates that it should be there. See the props below.
{
id: 'checkbox-1',
type: 'checkbox',
defaultChecked: true,
onChange: [Function: mockConstructor] {
_isMockFunction: true,
getMockImplementation: [Function (anonymous)],
mock: [Getter/Setter],
mockClear: [Function (anonymous)],
mockReset: [Function (anonymous)],
mockRestore: [Function (anonymous)],
mockReturnValueOnce: [Function (anonymous)],
mockResolvedValueOnce: [Function (anonymous)],
mockRejectedValueOnce: [Function (anonymous)],
mockReturnValue: [Function (anonymous)],
mockResolvedValue: [Function (anonymous)],
mockRejectedValue: [Function (anonymous)],
mockImplementationOnce: [Function (anonymous)],
mockImplementation: [Function (anonymous)],
mockReturnThis: [Function (anonymous)],
mockName: [Function (anonymous)],
getMockName: [Function (anonymous)]
}
}
Thanks!