I´m working on the challenge 25 + 5 Clock. The app is built with:
React 18
useState
useEffect
useRef
Currently the app passes 17 of the 29 tests. Today I´m looking for some guidance to figure out one of them.
User Story #11:
When I click the element with the id of reset, any running timer should be stopped, the value within id=“break-length” should return to 5, the value within id=“session-length” should return to 25, and the element with id=“time-left” should reset to its default state.
Test expect:
When I click the element with the id of “reset”, any running timer should be stopped, the value within id=“break-length” should return to 5, the value within id=“session-length” should return to 25, and the element with id=“time-left” should reset to it’s default state.
Test Result
Default timer label was not properly reset : expected ‘Break’ to equal ‘Session’
AssertionError: Default timer label was not properly reset : expected ‘Break’ to equal ‘Session’
Seems to be an easy solve, but I dont see it. Need some extra eyes on this one to help me see it.
Hello. Any luck since this post? I’m having the same error and also cannot find the solution. If it helps at all, I believe the problem has something to do with the async nature of useState. I know setState in React Classes is also async, and I’ve tried mimicking the way the example project does it it to get it to work, but no luck. …
Ok, so this post was my rubber duck! I don’t have the full solution but I have confirmed my suspicion about the async nature of the problem. In my Timer component, I put a “handleReset” method that’s called when the #reset button is clicked. I tired document.getElementById("timer-label").innerHTML = "session";
Now it passes this test. The problem is the next error I believe has the same root cause. I don’t understand the problem well enough to have a full solution, but this hack works in the short term.
Edit: To clarify, the getElementById is followed by the original reset method which sets the #timer-label related state and other reset state changes.
Hi, thanks for your input. I took a pause on this one and have not gotten back to it yet.
But, I read somewhere that it can be caused by the times the page renders after the click. My inkling is that the click cause the site to re-render and update some values but not all. In this render the test-script expect the value in the element to be correct and fails because the element has not received correct value yet because state has not changed yet.
Maybe we we are on the same path here, keep me posted of what you find!
