Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chore(deps): Migrate to React 18 #649

Merged
merged 8 commits into from
Dec 21, 2023
Merged

Conversation

drikusroor
Copy link
Contributor

@drikusroor drikusroor commented Dec 11, 2023

Resolves #442

This PR aims to migrate React from version 17 to version 18, which is the most recent version of React. See here for what is new in React 18.

Everything seems to work fine after the migration and some additional tweaks. However, after using React's StrictMode component, I found that findDOMNODE, which comes from the react-transition-group dependency, is deprecated. I've tried if updating it would do anything but alas. It's not a urgent issue I think, but perhaps we need to address it in the future.

@drikusroor drikusroor force-pushed the deps/migrate-to-react-18 branch from b296d9a to 9bb6374 Compare December 13, 2023 09:57
@drikusroor drikusroor marked this pull request as ready for review December 13, 2023 16:02
@drikusroor drikusroor changed the title Draft: Chore(deps): Migrate to React 18 Chore(deps): Migrate to React 18 Dec 13, 2023
@drikusroor drikusroor self-assigned this Dec 13, 2023
@drikusroor drikusroor added the dependencies Pull requests that update a dependency file label Dec 13, 2023
@drikusroor drikusroor force-pushed the deps/migrate-to-react-18 branch from b2c1ced to e6cec50 Compare December 16, 2023 13:34
@BeritJanssen
Copy link
Collaborator

Thanks for doing this! Will the app still build from this branch? I don't see the findDOMNode function used anywhere, and the components imported from "react-transition-group" - TransitionGroup and CSSTransition - were introduced before my time. Does the StrictMode wrapper for dev only mean we suppress some warnings during build time?

@drikusroor
Copy link
Contributor Author

Thanks for doing this! Will the app still build from this branch? I don't see the findDOMNode function used anywhere, and the components imported from "react-transition-group" - TransitionGroup and CSSTransition - were introduced before my time. Does the StrictMode wrapper for dev only mean we suppress some warnings during build time?

StrictMode warns us about incorrect patterns or deprecated functions, which is only useful on our local develop environments, so I've turned it off for production. It's technically a component so if it would have been turned on, warnings can show up in the console on the acc or prod website.

…functionality.

- Update Circle.test.js to use the jest.requireActual method to import Timer.
- Create a timerSpy variable to spy on the Timer.default method.
- Mock the requestAnimationFrame method to simulate the async nature of the call.
- Add beforeEach and afterEach hooks to clear all mocks and setup the necessary spy.
- Modify the "calls onTick and onFinish callbacks when running is true" test case to pass the required props to Circle component and improve readability.
- Add a new test case "does not start timer when running is false" to verify the behavior of Circle component when running is false.
- Improve the calculation of style for circle animation in the "calculates style for circle animation correctly" test case.
- Clean up the code by removing unnecessary commented code and imports.

This commit enhances the testability and functionality of the Circle component.
…t 18

This commit removes unnecessary testing library dependencies from the frontend package.json and useResultHandler.test.js files. By removing the @testing-library/react-hooks dependency, the codebase is simplified and optimized.
@drikusroor drikusroor force-pushed the deps/migrate-to-react-18 branch from e6cec50 to e42d83d Compare December 21, 2023 11:24
@drikusroor drikusroor merged commit db976bd into develop Dec 21, 2023
9 checks passed
@drikusroor drikusroor deleted the deps/migrate-to-react-18 branch January 8, 2024 14:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dependencies Pull requests that update a dependency file
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Update React
2 participants