javascript - サイプレスと @testing-library/cypress でチェックボックスの切り替えをテストする方法、

Question

ヒノキのテストライブラリを使用して、アコーディオンのトグルアクションをテストするために書き込もうとしています。以下はアコーディオンのマークアップです。チェックボックス 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 を返すことです。どうすればこれを修正したり、上記のテストを正しい方法で記述したりできますか。

ありがとう