javascript - How to unit test a callback function was called on a React component using Cypress - Stack Overflow

admin管理员组

文章数量:1317559

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

Share Improve this question Follow asked Sep 17, 2020 at 4:32 MkManMkMan 2,19133 gold badges1818 silver badges2929 bronze badges 2

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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'); 
  });
});

本文标签： javascriptHow to unit test a callback function was called on a React component using CypressStack Overflow