admin管理员组文章数量:1317724
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
Share Improve this question asked Sep 17, 2020 at 4:32 MkManMkMan 2,1913 gold badges18 silver badges29 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 thecypress-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
Reset to default 9Essentially, 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');
});
});
版权声明:本文标题:javascript - How to unit test a callback function was called on a React component using Cypress - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742022296a2414899.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论