I have the following parent ponent:

import React, { Fragment } from 'react';

export class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
    };
  }

  onClick = () => {
    // working
  }

  render() {

    return (
      <Fragment>
        <Child handleClick={this.onClick} />
      </Fragment>
    );
  }
}

I need to check if callback fired in Child ponent, onClick method will be fired in Parent ponent. I wrote such a test:

test("check callback fire", () => {
    let mockFn = jest.fn();
    Parent.prototype.onClick = mockFn;

    let wrapper = shallow(<Parent />);

    wrapper.find('Child').props().handleClick();

    expect(mockFn).toHaveBeenCalled();
  });

and I got an error

 Expected mock function to have been called, but it was not called.

How can I do that properly with jest and enzyme? Is it possible?

I have the following parent ponent:

import React, { Fragment } from 'react';

export class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
    };
  }

  onClick = () => {
    // working
  }

  render() {

    return (
      <Fragment>
        <Child handleClick={this.onClick} />
      </Fragment>
    );
  }
}

I need to check if callback fired in Child ponent, onClick method will be fired in Parent ponent. I wrote such a test:

test("check callback fire", () => {
    let mockFn = jest.fn();
    Parent.prototype.onClick = mockFn;

    let wrapper = shallow(<Parent />);

    wrapper.find('Child').props().handleClick();

    expect(mockFn).toHaveBeenCalled();
  });

and I got an error

 Expected mock function to have been called, but it was not called.

How can I do that properly with jest and enzyme? Is it possible?

• javascript
• reactjs
• jestjs
• enzyme

Share Improve this question Follow edited May 10, 2019 at 7:24 skyboyer 23.8k77 gold badges6262 silver badges7171 bronze badges asked May 9, 2019 at 20:31 rick1rick1 94644 gold badges1818 silver badges3333 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Your onClick function is on the object itself, not the prototype. You have to modify the object instance.

let mockFn = jest.fn();
let wrapper = shallow(<Parent />);
wrapper.find('Child').props().handleClick = mockFn; 
wrapper.find('Child').props().handleClick(); 
expect(mockFn).toHaveBeenCalled();

Having said that, you are calling onClick yourself, so it doesn't make sense to test that it was called.

You should test its effect, for example, part of the DOM is not showing.

You could also test that they ponent's state updates correctly, that is {show: false}

the problem es from the declaration of the onClick method, if you declare your function like this

onClick() {}

instead of

onClick = () => {}

your test should work because onClick will be present in the Parent.prototype object, note that this keyword in the onClick method will no longer refers to the class instance.

If you need to use arrow function (to get the correct value of this), you could modify your test :

test("check callback fire", () => {
  let mockFn = jest.fn();

  let wrapper = shallow(<Parent />);
  wrapper.instance().onClick = mockFn;

  wrapper.find('Child').props().handleClick();

  expect(mockFn).toHaveBeenCalled();
});

Using onClick = () => {} in the Parent class will not add the property to Parent.prototype, in fact it will declare an instance variable like this :

class Parent {
  constructor() {
    super();
    this.onClick = () => {}
  }
}

By the way, the presence of Fragment inside your render method seems to be useless, you could remove it

render() {
  return <Child handleClick={this.onClick} />;
}

I suggest doing this with two tests:

1. A unit test for the Child ponent that asserts its onClick prop is called when appropriate.
2. A unit test for the Parent that it properly sets the onClick prop of its Child when rendered.

With these two tests, you will be alerted if either of these pieces fails.