NextJS buttons are not actionable right away (potentially related to hydration)

[cachho]

I have a pretty big app, meaning a big layout, many providers etc. (that's probably why I couldn't minimally reproduce this).

The problem: I want to test the action of a button in a client component.

The problem: when buttons are first rendered in, clicking them does nothing; cypress clicks them right when they appear. So my tests fail.

This behavior cannot be reproduced manually, because I'm not able to click the button instantly.

The obvious workaround is to just have cypress wait arbitrarily, this works, but it's not recommended for reasons that have been discussed plenty of times.

The other workaround I found is to disable the button until it is hydrated on the client via useEffect

const [ready, setReady] = React.useState(false)

useEffect(() => {
  setReady(true)
, [])

return (<button onClick={() => {}} disabled={!isReady}>Button</button>)

I don't want to do this because I think this has SEO disadvantages, as the initial render now shows disabled button. I also have to write my code around the tests, which should not be the case.

This issue does not only apply to buttons. I'm also having this issue with input fields that cypress can't type into, giving me an error that they are disabled, when they certainly aren't disabled.

Am I the only one with this problem? What would be the best way to solve it? Can someone point me in the right direction?