代码之家 › 专栏 › 技术社区 › MkMan

如何使用Cypress对React组件调用回调函数进行单元测试

cypress unit-testing reactjs javascript

MkMan · 技术社区 · 4 年前

我正在尝试使用 cypress-react-unit-test 对我的组件进行单元测试。

在这个例子中,我有一个按钮,它通过一个回调函数在点击时执行。我有下面的代码,但在突出显示的行中立即失败。错误消息是 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
  });
});

我做错了什么?如何测试单击按钮时是否执行了onClick道具。

谢谢

0 回复 | 直到 4 年前

Richard Matsen 4 年前

基本上 expect() 在Cypress命令运行之前被执行。

您需要将expect链接到 .then() 根据 toggle-spec 实例

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

  });
});

或者根据 stub 实例

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

推荐文章

Devang Sanghani · 柏树检查线通过

2 年前

Iqra Luqman · 如何为动态输入字段编写cypress定位器

2 年前

Val · 带组件测试的加载夹具

2 年前

ThimiraR · 有没有一种简单的方法可以在不使用仪表板的情况下并行执行cypress测试?

2 年前

Marcell Malbolge · 观察控制台是否有错误

2 年前

musicformellons · Cypress中的暂停和调试有什么区别

7 年前

bbsimonbb · 在cypress中,如何等待页面加载?

7 年前

Maurice · 柏树酱实验室

7 年前

Lee Goddard · React虚拟化:通过e2e选择器以编程方式访问单元

7 年前

user3727540 · Cypress-比较两个输入的相等性

7 年前