score:5

Accepted answer

your validatebeforesave function is declared within somecomponent making it a closed/private scope function not accessible outside. you can pass that function as a prop and you can then create spy and pass it as a prop value in your test and test for if the prop function passed (spy) was called or not

so you would modify your function somewhat like this:

// some validator function
function validatebeforesave(){
  ...
}

// some function component

const somecomponent = (props: imycomponentprops) => {
  const { classes, validatebeforesave } = props;

  // component has state
  const [count, setcount] = usestate(0);


  function handleclick() {
  validatebeforesave();
  .
  .
  .
  }

  return (
   <div>
      <button>
      classname="savebtn"
      onclick={handleclick}
      </button>
    </div>
  );

};

and in your unit test, something like this:

  // unit test
  describe('somecomponent' () => {
  it('validates model on button click', () => {
      const validatespy = jest.fn();
      const wrapper = mount(
        <muithemeprovider theme={theme}>
          <somecomponent validatespy={validatespy}/>
        </muithemeprovider>,
      );
      const instance = wrapper.instance();
      wrapper
        .find('.savebtn')
        .at(0)
        .simulate('click');
      expect(validatespy).tohavebeencalledtimes(1);
    });
  }

score:0

i had similar problem mocking callback prop method with react 16.x.x, enzyme instance method returns null, what you can do is pass directly jest.fn() as a prop.

example:

  it('should invoke callback with proper data upon checkbox click', () => {
    const spycheckboxclick = jest.fn((id, item) => ({
      id,
      item,
    }))
    const component: any = enzyme.mount(
      <sectioncolumn {...{
        ...mockprops,
        oncheckboxclick: spycheckboxclick,
      }} />
    );
    expect(spycheckboxclick).tohavebeencalledtimes(0);
    // perform click to checkbox
    const checkboxcomponent = component.find('styledcheckbox');
    const input = checkboxcomponent.first().children();
    input.simulate('change');
    expect(spycheckboxclick).tohavebeencalledtimes(1);
    expect(spycheckboxclick()).toequal(null)
 });

score:1

i was also facing the same issue - i did like below -

import * as react from 'react';

const samplecomponent = () => {
  const samplemethod = () => {
    console.log('hello world');
  };

  return <button onclick={samplemethod} type="button">click me</button>;
};

export default samplecomponent;

test -

import react from 'react';
import samplecomponent from './';
import { shallow } from 'enzyme';

describe('samplecomponent', () => {
  test('should handle click correctly', () => {
    const logspy = jest.spyon(console, 'log');
    const wrapper = shallow(<samplecomponent></samplecomponent>);
    const button = wrapper.find('button');
    expect(button.text()).tobe('click me');
    button.simulate('click');
    expect(logspy).tobecalledwith('hello world');
  });
});

we can spy on console.log, to assert it is to be called or not

check - https://stackoverflow.com/a/58637912/10734622


Related Query

More Query from same tag