nairda
July 20, 2022, 4:49am
1
**Project 25+5 Clock “done” but its built in React 18.2.0 **
The test script wont work,
after a little googling, I found:
TL;DR
You should use ReactDOM.render instead of ReactDOM.createRoot in order to pass the tests for the 25 + 5 Clock.
Sorry for the clickbait title - I couldn’t help it.
Tell us what’s happening:
Using the latest version of React (18) seems to break the FCC tests for this project. This only happens if you use the new ReactDOM.createRoot entry point, which is recommended by React in their documentation. This took me two days to figure out, so I wanted to bring it up in case anyone else has th…
opened 05:23PM - 11 May 22 UTC
closed 04:42PM - 28 Aug 23 UTC
type: bug
scope: curriculum
Update: In an attempt to fix the issue with React 18 we have implemented delays … to button clicks performed by the tests and before checking the DOM content. This isn't guaranteed to fix the issue for all projects.
If you want to make sure your project is not failing because of React 18 start by using the old render method.
```js
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
```
If that doesn't help try downgrading to React 17.
Using the [flushSync](https://react.dev/reference/react-dom/flushSync) function may also be an option, but that is really more of a last-resort type fix.
If your project still fails with React 17 it is likely not an issue with the tests.
---
Code that is passing using React 17 is failing with React 18.
It seems to be an issue with the new batch rendering and our tests. At this time, I'm not sure what the best solution is. I haven't really looked into it much.
### Affected Page
* JavaScript Calculator ✅ (the example project is passing but we may have to use a longer delay)
* [PR](https://github.com/freeCodeCamp/testable-projects-fcc/pull/1454)
* 25 + 5 Clock ✅ (may still fail using React 18 and hooks)
* [PR](https://github.com/freeCodeCamp/testable-projects-fcc/pull/1485)
* Drum Machine ✅
* [PR](https://github.com/freeCodeCamp/testable-projects-fcc/pull/1452)
Tests: https://github.com/freeCodeCamp/testable-projects-fcc/blob/main/src/project-tests/
### Additional context
Forum threads:
https://forum.freecodecamp.org/t/drum-machine-test-7-is-failing/507800/
https://forum.freecodecamp.org/t/stuck-on-drum-machine-test-7/508120/
https://forum.freecodecamp.org/t/25-5-clock-pomodoro-timer-not-passing-test-12-decrease-break-time/504446/12
https://forum.freecodecamp.org/t/my-tests-don-t-make-sense-in-my-25-5-clock/504936
I won’t know if the project is done or not
How should I proceed?
my code:
live site:
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
Challenge: Front End Development Libraries Projects - Build a 25 + 5 Clock
Link to the challenge:
Learn to Code — For Free
I was able to follow this article to get your app running using React 17 and your app passes 26 out of the 29 tests.
The main points are:
Delete node_modules
.
Delete package-lock.json
Make the following changes to your package.json
file:"@testing-library/react": "^13.3.0",
"react": "^17.0.0",
"react-dom": "^17.0.0",
Make the following changes in your ./src/index.js
file:
Changeimport ReactDOM from 'react-dom/client';
toimport ReactDOM from 'react-dom';
Changeconst root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<App />
</Provider>
// <React.StrictMode>
// </React.StrictMode>
);
toconst root = document.getElementById('root');
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
root
);
Run npm install
Run npm start
NOTE: Of the 3 tests you are failing, you can easily fix the one where the sound plays when the timer hits 00:00
. The other two tests are technically testing for an invalid app. The tests actually expect the timer to go from 00:00
back to the applicable session or break length time. Of course doing this ends up adding one second more to each session and break. Over an hour, this would add 1 extra minute of session and 1 extra minute of break. You will have to hack your valid timer (in my opinion) just to pass the tests.
1 Like
nairda
July 20, 2022, 8:50pm
3
Thank you so much @camperextraordinaire for your time and help!
Downgraded react to 17.0.2 and the tests work again
It was a really good idea
( p.s. gotta do what you gotta do to pass the tests )
Have great day!
system
Closed
January 19, 2023, 8:50am
4
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.