Mocha not calling my function in my test

Question

I have this test:

it('calls addTheItem when clicked', () => {
  wrapper.find('.addBtn').simulate('click')
  expect(addTheItemStub.called).to.equal(true)
});

This is my code

<button
  className="addBtn"
  onClick={() => {this.addTheItem(inputValue); this.clearInput()}}
  >
  Add Item
</button>

This code works when I play around with it. just the test isn't passing.

also in my beforeEach:

    const addTheItemStub = sinon.spy();
    const addItemStub = sinon.spy();
    const usingEnterKeyStub = sinon.spy();
    beforeEach(() => {
      wrapper = shallow(
        <Container
          addTheItem={addTheItemStub}
          addItem={addItemStub}
          items={itemsStub}
          usingEnterKey={usingEnterKeyStub}
        />
      )
    });

I'm stubbing it out. I'm expecting the stub to be called.

but it's expecting it to be not called or false. what am i doing wrong?

Answer 1

I see that in button's onClick handler, you are calling your methods as this.addTheItem and this.clearInput . But you are passing the stubs for these methods as props to the parent Container element.

The stubs won't be called unless you use the methods from props, ie, this.props.addTheItem and this.props.clearInput .