javascript - Cannot simulate click on jest test -


i'm learning react + testing jest, have component has three numeric inputs , button. it's simple calculator multiply operation only.

don't worry rest of code, i'm trying simulate click performs operation (in case call mocked function shown in test)

this test

function setup() {     const component = shallow(<multiplier />);      return {        component: component,        button: component.find('#multiplybutton')     } }  describe('given multiplier instantiated', () => {    it('the button perform operation should invoke click method', () => {        const { button } = setup();        const handleclick = jest.fn();        button.onclick = handleclick;        button.simulate('onclick');        expect(handleclick).tobecalled();    }); }); 

i think button.onclick assignment wrong, tried prototype , ecma6 object.assign same result, test fails.

i mocked onclick button jest.fn(), once button pressed should call method, it's telling me:

given multiplier instantiated › button perform operation should invoke click method expect(jest.fn()).tobecalled()

any ideas on how solve this?

in example, button shallowwrapper , cant set onclick there. should pass mock function onclick button prop. , prefer test public api of component, because private method implementation detail should hidden users of component.

// component const mybutton = ({ label, onclick }) => (   <button type='button' onclick={onclick}>{label}</button> )  // test describe('<mybutton/>', () => {   test('should call onclick callback', () => {     const onclick = jest.fn();     const wrapper = shallow(<mybutton onclick={onclick}/>);     wrapper.simulate('click');     expect(onclick).tohavebeencalled();   }); }); 

Comments

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

.htaccess - ERR_TOO_MANY_REDIRECTS htaccess -