25 + 5 Clock: Timer has not reached 00:00

[zach.buford]

After much research on other forum posts here, I’ve decided to make my own post due to the limited amount of information. Currently, my pomodoro timer is passing 22/29 tests. I have run my app both locally in React 18 strict mode and in CodeSandbox, where I tried downgrading the app to React 17 to see if it made a difference, which it did not.

The first test it fails is the Content test #8, which reads, “time-left is not formatted correctly: expected ‘25’ to equal ‘60’. AssertionError”. To attempt to fix this, I disabled my increment functions while the timer is playing, which did not impact any test outcomes.

The other six tests that are failing (#Timer #1, 12, 13, 14, 15, #Audio #1) are all related to the same error, namely “Timer has not reached 00:00.”
Within the code that deals with resetting the clockCounter at 00:00, I tried to reduce the trigger value from 0 to -1 to ensure that the timer would show 00:00 for an entire second, but this didn’t work either.

I would love for someone to check out my code and show me things I could do better, ways to improve, even if we can’t get the app to pass the test cases. You should be able to see the entire App here: https://codesandbox.io/s/pomodoro-5dvv75

[lasjorg]

1. Move the Clock component out of the App component. You should never define components inside other components.

2. You have a dependency that doesn’t belong in the dependencies array for the useEffect. Select/highlight each of the dependencies and look for the one that is not inside the useEffect. Remove that one from the array.

[zach.buford]

I am absolutely astounded by your response! As soon as I moved the Clock component all of my tests passed. I didn’t expect such a difference from what I thought was a minor syntax change. Thanks for your help.

[lasjorg]

Read down to the Pitfall box on this docs page, it gives an explanation of what happens.

Preserving and Resetting State – React