I am trying to use cypress-react-unit-test to unit test my React ponents.

In this instance I have a Button, that gets passed a callback function to execute on click. I have the code below but fails immediately at the line highlighted. The error message is expected stub to have been called at least once, but it was never called.

import React from 'react';
import { mount } from 'cypress-react-unit-test';

const Button = ({ onClick }) => (
  <button onClick={onClick} data-test-ref="button">
    Hello
  </button>
);

describe('Button', () => {
  it('should call the onClick function', () => {
    const onClick = cy.stub();

    mount(<Button onClick={onClick} />);
    cy.get(`[data-test-ref=button]`).click();

    // expect(onClick).to.be.called; // fails
  });
});

What am I doing wrong? How do I test that the onClick prop was executed when the button is clicked.

Thanks

I am trying to use cypress-react-unit-test to unit test my React ponents.

In this instance I have a Button, that gets passed a callback function to execute on click. I have the code below but fails immediately at the line highlighted. The error message is expected stub to have been called at least once, but it was never called.

import React from 'react';
import { mount } from 'cypress-react-unit-test';

const Button = ({ onClick }) => (
  <button onClick={onClick} data-test-ref="button">
    Hello
  </button>
);

describe('Button', () => {
  it('should call the onClick function', () => {
    const onClick = cy.stub();

    mount(<Button onClick={onClick} />);
    cy.get(`[data-test-ref=button]`).click();

    // expect(onClick).to.be.called; // fails
  });
});

What am I doing wrong? How do I test that the onClick prop was executed when the button is clicked.

Thanks

• javascript
• reactjs
• unit-testing
• cypress

• hi there, are you sure the click function is working or not from the UI? if yes, then you can make use of the cypress-react-selector to validate the new value of a certain prop. You can this example list here – Abhinaba Commented Sep 17, 2020 at 9:24
• Hello. With the expect statement unmented the test fails straight away without the UI even rendering. – MkMan Commented Sep 17, 2020 at 9:49

1 Answer 1

Essentially, the expect() is getting executed before the Cypress mands get a chance to run.

You need to chain the expect inside a .then() as per the toggle-spec example,

describe('Button', () => {
  it('should call the onClick function', () => {
    const onClick = cy.stub();

    mount(<Button onClick={onClick} />);
    cy.get(`[data-test-ref=button]`).click()
    .then(() => {
      expect(onClick).to.be.called; // succeeds
    });

  });
});

Or alias the stub as per the stub example,

describe('Button', () => {
  it('should call the onClick function', () => {
    const onClick = cy.stub().as('my-button');

    mount(<Button onClick={onClick} />);
    cy.get(`[data-test-ref=button]`).click();

    cy.get('@my-button').should('have.been.called'); 
  });
});