React Enzyme onclick expect "onclick was called!"

Question

I want to simulate the click on button and expect that onclick was called.

current result fails //expect(wrapper.instance().onclick().called).to.be.equal(true) FAILED jsx

const DeselectAll = (props: Props) => (
  <div className="deselectall">
    <Button
      className="deselectall--button"
      icon="minus"
      onClick={props.clearItems}
      text={translate("deselectall")}
    />
  </div>
);

test

function MySpy() {
  this.calls = 0;
}

  MySpy.prototype.fn = function () {
    return () => this.calls++;
  }

  When(/^Deselect all button is clicked$/, function () {
       const mySpy = new MySpy();
    const mockCallBack = mySpy.fn();

    const button =     const mySpy = new MySpy();
    const mockCallBack = mySpy.fn();

    const button = React.createElement(componentName, { onClick: 
                                                            mountCallBack});
    const childBtn = button.find('.whiteboardarea__deselectall--button');
    console.log("deselectall button found ??? ==== " + childBtn.exists());
    button.props.onClick();
    console.log("if it works ==== " + expect(mySpy.calls).to.be.equal(1));
    return true;
  });

Should `wrapper.instance().onclick().called` be `wrapper.instance().onClick().called`? — Drew Reese, Jul 15 '21 at 08:25
@DrewReese i tried but this the result. ERROR: When Deselect all button is clicked: Error: wrapper.instance(...).onClick is not a function — Lab9106, Jul 15 '21 at 08:29
@DrewReese i guess this is not the way to check.. i am not sure how to check it. — Lab9106, Jul 15 '21 at 08:29
You could try a mock `clearItems` callback function, simulate clicking the button, and assert the callback was called. Your test is basically testing that `Button` has correctly wired up the `onClick` prop to the underlying DOMNode, but you are trying to test `DeselectAll` component code/logic. — Drew Reese, Jul 15 '21 at 08:34
Do you want code example in Enzyme (I've not used in a couple years), or would a sample react-testing-library example be sufficient? — Drew Reese, Jul 15 '21 at 08:40
and i think my expect (code) is wrong here as i have to check on deselectBtn i guess and not on wrapper itself. But not sure how to check if onclick was called or not in this button — Lab9106, Jul 15 '21 at 08:43
Yeah, I was wondering about that. Try asserting on the button wrapper being clicked, then if you still need help I can write an answer with what I suggested. Are you using Jest? — Drew Reese, Jul 15 '21 at 08:44
@DrewReese no thats the case.i am not using jest and neither sinon. is there any other way without using that to test it. ? — Lab9106, Jul 15 '21 at 08:50
Those are the two I would use. Implementation #3 from [here](https://stackoverflow.com/a/46211877/8690857) looks somewhat promising if you can't use Jest/Sinon and need to roll your own spy. — Drew Reese, Jul 15 '21 at 08:54
tried to roll my own spy but throws error: Button is not yet there in DOM. so it fails . I have added the code above. — Lab9106, Jul 15 '21 at 11:15

score 0 · Answer 1 · answered Jul 15 '21 at 15:26

Looks like your attempt was close. You still need to use Enzyme and mount the DeselectAll component under test. Pass the mock callback to the DeselectAll component's clearItems prop so the button has a callback available.

function MySpy() {
  this.calls = 0;
}

MySpy.prototype.fn = function () {
  return () => this.calls++;
}

When(/^Deselect all button is clicked$/, function () {
  const mySpy = new MySpy();
  const mockCallBack = mySpy.fn();

  const wrapper = enzyme.mount(
    <DeselectAll clearItems={mockCallBack}/>
  );

  const deselectBtn = wrapper.find('.deselectall--button').first();

  // Test that the button is truthy
  expect(deselectBtn).to.have.length(1);

  // simulate the click
  deselectBtn.props().onClick();

  // Test the output
  return expect(mySpy.calls).to.be.equal(1);
});

If this still isn't working then I suspect the code may not be simulating the click correctly. If this is the case I'll still try to help the best I can, but keep in mind I'm a bit rusty on Enzyme and you seem to have an odd testing setup/configuration.

React Enzyme onclick expect "onclick was called!"

1 Answers1