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

问题描述

我正在尝试使用cypress测试库来测试手风琴的切换动作。下面是手风琴的标记，正在使用复选框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，我该如何解决此问题或以正确的方式编写以上测试。

谢谢

解决方法

基于the Cypress Testing Library examples，而不是将角色传递给对象（cy.findByRole({ role: "checkbox" })），应将其作为第一个参数传递：

cy.findByRole("checkbox");

此外，正如乔纳（Jonah）所指出的，我认为您的测试可能会失败，因为您正在尝试将cy.findByRole的返回值分配给变量。在赛普拉斯中，一切都是异步的，因此您需要链接您的断言。 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")

如果复选框具有很好的ID（cy.findByRole({ role: "checkbox" });），为什么要使用 id="item1"？我只会使用cy.get('#item1')来获得所需的复选框。

此外，如果要选中此复选框，赛普拉斯具有用于.check()和.uncheck()的取消选择方法。

总而言之，您的代码可能是：

it("should toggle accordion ",() => {
        cy.get('#item1').should('not.be.checked')
        cy.get(".accordion__itemContent").invoke("display").equal("none")
        cy.get('#item1').check().should('be.checked')
        cy.get(".accordion__itemContent").invoke("display").equal("block")
    })

cypress javascript testing-library