25 + 5 Clock JS-React

Hello

I’m struggling to pass test 13 and 15 for the 25 + 5 Clock

My CodePen here

  1. When a session countdown reaches zero (NOTE: timer MUST reach 00:00), a new break countdown should begin, counting down from the value currently displayed in the id=“break-length” element.
    Timer has reached zero but didn’t switch to Break time: expected ‘Work hard’ to not equal ‘Work hard’ AssertionError: Timer has reached zero but didn’t switch to Break time: expected ‘Work hard’ to not equal ‘Work hard’

  2. When a break countdown reaches zero (NOTE: timer MUST reach 00:00), a new session countdown should begin, counting down from the value currently displayed in the id=“session-length” element.
    Timer has reached zero but didn’t switch back to Session time.: expected ‘Rest’ to not equal ‘Rest’ AssertionError: Timer has reached zero but didn’t switch back to Session time.: expected ‘Rest’ to not equal ‘Rest’

It is strange as visually when the timer reaches 00:00, ‘Work hard’ switches to ‘Rest’ and vice-versa.

I think it may be due to how components/state update asynchronously…

Any ideas? Please don’t mind the UI as I’m focusing on the logic first.

TIA
Valentin

it seems you are using React 18, so it may be this issue:

Yup and I had the same issue with the calculator although I managed to pass the test using:
ReactDOM.render(<App />, document.getElementById('root'))
instead of :
const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> );

I’m using the ReactDOM.render as well with my clock but this does not seem to solve it unfortunately.

Do you know how I can use React 17 in CodePen? It seems only version 18 is available in Add External Script…

You can add any link you want in add external script, you just have to Google for it yourself

Thanks, I did try with React 17,16 and 15 but to no avail.

Currently testing with React 15 and if I run multiple tests in a row, I obtain different scores each time, first one 28/29 passed, then 26/29 passed then 27/29 passed, and this without changing a single line in my code.

The tests I fail are 13,14,15. Or a mix of these depending on the mood of the automated test :smiling_face_with_tear: