javascript - 如何使用 Cypress 和 @testing-library/cypress 测试复选框切换，

Question

我正在尝试使用 Cypress 测试库编写测试 Accordion 的切换操作。 下面是 Accordion 的标记，它是使用复选框 hack 进行切换的:

 <div class='accordion'>
                <div class='accordion__item'>
                    <input style="display:none" type="checkbox"  id="item1"/>
                    <label class="accordion__itemLabel"for="item1">FAQ's</label>
                    <div style="display:none" class="accordion__itemContent"> FAQ Content Here </div>
                </div>
                <div class='accordion__item'>
                    <input style="display:none" type="checkbox"  id="item2"/>
                    <label class="accordion__itemLabel"for="item2">Contact us details</label>
                    <div style="display:none" class="accordion__itemContent"> Contact us details here </div>
                </div>
 </div>

测试如下:

    it("should toggle accordion ", () => {
            const checkbox = cy.findByRole({ role: "checkbox" });
            expect(checkbox.checked).equal(false);
            cy.get(".accordion__itemContent").invoke("display").equal("none")
            fireEvent.click(checkbox)
            expect(checkbox.checked).equal(true);
            cy.get(".accordion__itemContent").invoke("display").equal("block")
        })

问题是 cy.findByRole({ role: "checkbox"}); 总是返回 undefined ，我该如何解决这个问题或以正确的方式编写上面的测试。

谢谢

Answer 1

基于the Cypress Testing Library examples ，您应该将其作为第一个参数传递，而不是在对象中传递 Angular 色 (cy.findByRole({ role: "checkbox"})):

cy.findByRole("checkbox");

除此之外，正如 Jonah 指出的那样，我认为您的测试可能会失败，因为您试图将 cy.findByRole 的返回值分配给变量。在 Cypress 中，一切都是异步的，因此您需要链接您的断言。 the Cypress documentation对此进行了更深入的解释。 .

这是您根据上述所有内容重写的测试用例:

cy.findByRole("checkbox").should("not.be.checked");
cy.get(".accordion__itemContent").invoke("display").equal("none")
cy.findByRole("checkbox")
  .check()
  .should("be.checked");
cy.get(".accordion__itemContent").invoke("display").equal("block")