How can I make assertions on callback arguments with cypress component testing

Question

I have a component that expects a callback function to be passed as a prop. I can pass a stub and check if it has been called, but in fact, I want to assert the call arguments of the callback to look like an expected object.

  it('test plain', () => {
    const expected = {"BusinessPartner": {}}
    const expected2 = {"BusinessPartner": {...expected.BusinessPartner, ext_id: "123A"}}
    const onSubmitStub = cy.stub().as('submitted');

    cy.mount(
      <OpenApiForm 
        oajson={oajson}
        formRootObject="BusinessPartner"
        onSubmit={onSubmitStub}
      />
    )
    
    cy.get('[data-cy = "submit-form"]').click()
    cy.get('@submitted').should('have.been.called')  // should have been called with argument expected

    cy.get('[id = "#/properties/ext_id-input"]').type("123A")
    cy.get('[data-cy = "submit-form"]').click()
    cy.get('@submitted').should('have.been.called')  // should have been called with argument expected2
  })

How can I make assertions on the callbacks call arguments?

EDIT: I can use calledWith and make an assertion on the first call like: cy.get('@submitted').should('have.been.calledWithMatch', expected) However, the second call cy.get('@submitted').should('have.been.calledWithMatch', expected2) assertion fails. It is still only called with the empty object, even though manually executing the steps work. And this is still failing:

    //cy.get('[data-cy = "submit-form"]').click()
    //cy.get('@submitted').should('have.been.calledWithMatch', expected)

    cy.get('[id = "#/properties/ext_id-input"]').type("123A")
    cy.get('[data-cy = "submit-form"]').click()
    cy.get('@submitted').should('have.been.calledWithMatch', expected2)
    

EDIT 2: I have tried to render the callback argument as a json string into a hidden div and get the output from there. But this also fails, it very much looks like a timing issue but a cy.wait(500) also didn't help. However, inspecting the div in a regular browser with human interaction works as expected.

Answer 1

I think your stub is accumulating the calls, so you can either reset between sections or assert the whole list at the second call.

cy.get('@submitted').should('have.been.calledWithMatch', expected)
onSubmitStub.resetHistory()

cy.get('[id = "#/properties/ext_id-input"]').type("123A")
cy.get('[data-cy = "submit-form"]').click()
cy.get('@submitted').should('have.been.calledWithMatch', expected2)

or

cy.get('@submitted').should('have.been.calledWithMatch', expected)

cy.get('[id = "#/properties/ext_id-input"]').type("123A")
cy.get('[data-cy = "submit-form"]').click()
cy.get('@submitted').should('have.been.calledWithMatch', [expected, expected2])

Ref: Sinon-Chai, Sinon