expect(jest.fn())[.not].toHaveBeenCalled() error - reactjs

Question

I'm using Enzyme/Jest to write a test for a function on my component that is triggered through an onClick of a material's menu icon. The function is passed as props to the component. When writing test, it gives me error on simulating click.
import React from 'react';
import scssstyles from './ToggleSideNavComponent.scss';
class ToggleSideNavComponent extends React.Component {
render() {
return (
<a
id="toggle_sidebar_btn"
className={scssstyles.menuIcon}
onClick={this.props.handleSideNavToggle}
>
<i id="menu" className="material-icons menu-icon" style={{fontSize:30}}>menu</i>
</a>
);
}
}
module.exports = ToggleSideNavComponent;
TEST
import expect from 'expect';
import React from 'react';
import {mount, shallow} from 'enzyme';
import ToggleSideNavComponent from './ToggleSideNavComponent';
import sinon from 'sinon';
function setup() {
const props = {
handleSideNavToggle: sinon.spy()
};
return {
props: props,
wrapper: shallow(<ToggleSideNavComponent {...props} />)
};
}
describe('ToggleSideNavComponent', () => {
it('should have menu icon', () => {
const component = setup();
expect(component.wrapper.find('a #menu').length).toBe(1);
component.wrapper.find('#toggle_sidebar_btn #menu').simulate('click');
expect(component.props.handleSideNavToggle).toHaveBeenCalled();
});
});
error :
ToggleSideNavComponent › should have menu icon
expect(jest.fn())[.not].toHaveBeenCalled()
jest.fn() value must be a mock function or spy.
Received:
function: [Function proxy]
at Object.<anonymous> (src/components/app/Header/NavLeftList/ToggleSideNavComponent/ToggleSideNavComponent.spec.js:25:94)
at new Promise (<anonymous>)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)

Answer 1

If you're using Jest, you should use Jest's spies, rather than Sinon.
const props = {
handleSideNavToggle: jest.fn()
};

Answer 2

I've tried your code but changed shallow rendering to full DOM rendering using mount and everything works fine:
import React from 'react';
import {shallow, mount} from 'enzyme';
import ToggleSideNavComponent from './ToggleSideNavComponent';
function setup() {
const props = {
handleSideNavToggle: jest.fn()
};
return {
props: props,
wrapper: mount(<ToggleSideNavComponent {...props} />)
};
}
describe('ToggleSideNavComponent', () => {
it('should have menu icon', () => {
const component = setup();
expect(component.wrapper.find('a #menu').length).toBe(1);
component.wrapper.find('#toggle_sidebar_btn #menu').simulate('click');
expect(component.props.handleSideNavToggle).toHaveBeenCalled();
component.wrapper.unmount(); // don't forget to use unmount() after mounting
});
});
seems like there is a problem accessing props when using shallow rendering
If you only want to test the behavior of the handleSideNavToggle function (just unit test this function) then I don't recommend doing it using simulate because you don't need to test React's event wiring nor the browser's, instead you could have shallow rendered the parent component which provides this prop function to your component ToggleSideNavComponent and call this method using suitable arguments and assert results, for example:
describe('ToggleSideNavComponentParent', () => {
it('test parent component function', () => {
const wrapper = shallow(<ToggleSideNavComponentParent/>);
const instance = wrapper.instance();
let e = prepareSuitableEventObject();
instance.handleSideNavToggle(e);
// do your assertions here
});
});
function prepareSuitableEventObject() {
// construct an object and return it
}