I want to test is the button clicked and some actions happens but I fail the test and receive 0 number of calls when clicked. Im not passing onclick function from props. I'm using materialUi Button
const LoginFunction = () => {
const handleClick = () => {
console.log('some action here')
};
return (
<Button
data-test="btn"
className='btn'
onClick={() => {
handleClick();
}}
>
Some text
</Button>
)};
I wrote test like this
describe('Test Login component', () => {
it('should trigger click event', () => {
const mockCallBack = jest.fn();
const wrapper = shallow(<LoginFunction />);
wrapper.simulate('click');
expect(mockCallBack.mock.calls.length).toBe(1);
});
});
Tried this way too
describe('Test Login component', () => {
it('should trigger click event', () => {
const mockCallBack = jest.fn();
const wrapper = shallow(<LoginFunction />);
wrapper.find('.btn').simulate('click');
expect(mockCallBack.mock.calls.length).toBe(1);
});
});
**Also in the main component you can directly call the handler in onclick like this**
<Button
data-test="btn"
className='btn'
onClick={handleClick}
>
Some text
</Button>
describe('Test Login component', () => {
it('should trigger click event', () => {
const wrapper=mount( <LoginFunction />);
const result=wrapper.find('button').simulate('click')
expect(result).toBe('some action here')
});