Cypress.sinon

Cypress automatically includes Sinon.JS and exposes it as Cypress.sinon. Because commands cy.spy and cy.stub are already wrapping Sinon methods, the most common use for Cypress.sinon is to provide flexible matchers when doing assertions.

Syntax

Cypress.sinon.match(value)
Cypress.sinon.match.<matcher name>

Usage

Correct Usage

Cypress.sinon.match.string

Incorrect Usage

cy.sinon.match.string // Errors, cannot be chained off 'cy'

Examples

match.string

This example comes from the recipe Root style. Imagine an application code where the method setProperty is called to change a CSS variable:

document.querySelector('input[type=color]').addEventListener('change', (e) => {
  document.documentElement.style.setProperty(
    '--background-color',
    e.target.value
  )
})

We can write a test to confirm that the method setProperty was called with two strings; we don't care about value of the first string, but we do want to check if it was indeed a string.

cy.document()
  .its('documentElement.style')
  .then((style) => {
    cy.spy(style, 'setProperty').as('setColor')
  })

cy.get('input[type=color]').invoke('val', '#ff0000').trigger('change')

// we don't care about '--background-color' exact
// value but know it should be a string
cy.get('@setColor').should(
  'have.been.calledWith',
  Cypress.sinon.match.string,
  '#ff0000'
)

See also