Testing custom checkbox element

[tomdohnal]

I have a custom checkbox element using a common technique for styling it which hides the native <input type="checkbox" /> using clip-path and puts a clickable element on top of it instead (which can be styled).

However, this causes some problems for Cypress testing.

I use a data-test-id attribute for querying DOM elements I want to interact with.

1. If I put the data-test-id attribute on the "clickable element" (not the native checkbox), it works just fine for something like cy.getByTestId('checkbox-agreement').click() but it (not surprisingly) fails for cy.getByTestId('checkbox-agreement').shoud('be.checked'). (I'd have to use something like cy.getByTestId('checkbox-agreement').siblings('input').first().shoud('be.checked')` which feels rather fragile).

2. If I put the data-test-id attribute on the native <input type="checkbox" /> it works for cy.getByTestId('checkbox-agreement').shoud('be.checked') but fails for cy.getByTestId('checkbox-agreement').click() as the native <input type="checkbox" /> is hidden underneath my custom clickable element.
   To make it work, I have to use cy.getByTestId('checkbox-agreement').click({ force: true }) which works fine but I don't really like the idea of passing {force: true} whenever I test something with a custom checkbox.

Is there any other way to do it? Or is one of the two patterns described "better" than the other? Are there any other shortcomings of using a custom checkbox in Cypress that I might have missed?

Thanks!