refactor/vite

[anyulled]

refactor from create react app to vite

[gemini-code-assist]

Hello @anyulled, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

Summary of Changes

This pull request focuses on refactoring the project from Create React App (CRA) to Vite. This involves updating dependencies, modifying build scripts, and adjusting test configurations to align with Vite's requirements. The primary goal is to improve development speed and build performance by leveraging Vite's features.

Highlights

• Migration to Vite: The project is migrated from Create React App to Vite, which involves removing react-scripts and adding vite, @vitejs/plugin-react, and vitest as dependencies.
• Test Configuration Updates: Test configurations are updated to use vitest instead of react-scripts' testing environment, including setting up jsdom and adjusting mock implementations.
• Build Script Modifications: The package.json scripts are modified to use Vite's commands for starting, building, previewing, and testing the application.
• Index HTML Update: The index.html file is updated to include the necessary script tag for the main entry point (/src/index.tsx) and to ensure proper loading of the React application.
• Mocks Update: The test files are updated to use vi from vitest instead of jest for mocking dependencies.

Changelog

Click here to see the changelog

• index.html
  • Created a new index.html file with the basic HTML structure, including meta tags, link tags, and a script tag for the main entry point (/src/index.tsx).
  • Added a script to handle Single Page App redirects for GitHub Pages.
• package.json
  • Removed react-scripts dependency.
  • Added vite, @vitejs/plugin-react, @vitest/coverage-v8, and jsdom as dev dependencies.
  • Updated scripts to use Vite commands (vite, vite build, vite preview, vitest run).
  • Updated test-coverage script to use vitest.
  • Updated faker-js/faker to version ^8.0.0
• src/2023/Cfp/CfpSection2023.test.tsx
  • Replaced jest with vi from vitest for mocking useWindowSize.
• src/2023/Home/components/InfoButtons/InfoButtons.test.tsx
  • Replaced jest with vi from vitest for mocking gaEventTracker and clearing mocks.
• src/2023/Home/components/MultimediaInfoButtons/MultimediaInfoButtons.test.tsx
  • Replaced jest with vi from vitest for mocking gaEventTracker and clearing mocks.
• src/2023/SessionFeedback/SessionFeedback.test.tsx
  • Replaced jest with vi from vitest for mocking sessionData.
• src/2023/SpeakerDetail/Speaker.style.ts
  • Removed StyledSpeakerImgBorder and rightVariants styled components.
• src/2023/Speakers/Speakers2023.test.tsx
  • Replaced jest with vi from vitest for mocking dependencies.
  • Skipped the test handles errors correctly due to difficulties in mocking Sentry in Vitest.
• src/2024/SpeakerDetail/SpeakerDetail.tsx
  • Updated route imports to use ROUTE_2024_SPEAKERS and ROUTE_2024_TALK_DETAIL.
• src/2024/Speakers/Speakers2024.test.tsx
  • Replaced jest with vi from vitest for mocking dependencies.
• src/App.test.tsx
  • Replaced jest with vi from vitest for mocking axios and clearing mocks.
• src/components/UI/Button.test.tsx
  • Replaced jest with vi from vitest for mocking gaEventTracker and clearing mocks.
• src/hooks/useFetchSpeakers.test.tsx
  • Replaced jest with vi from vitest for mocking axios and clearing mocks.
• src/hooks/useFetchSpeakers.ts
  • Added type IResponse to the returnData variable.
• src/hooks/useFetchTalks.test.tsx
  • Replaced jest with vi from vitest for mocking axios and clearing mocks.
• src/index.tsx
  • Replaced ReactDOM.render with createRoot for React 18 compatibility.
  • Renamed tracking_ID to trackingID.
• src/setupTests.ts
  • Replaced jest.fn() with vi.fn() for mocking window.scrollTo.
• src/views/Home/components/Faqs/components/FaqsCard.tsx
  • Updated image path to use /images/FaqsImage${index}.jpg instead of require.
• src/views/Home/components/InfoButtons/InfoButtons.test.tsx
  • Replaced jest with vi from vitest for mocking gaEventTracker and clearing mocks.
• src/views/Home/components/Sponsors/Supporters.test.tsx
  • Replaced jest with vi from vitest for mocking useWindowSize and clearing mocks.
• src/views/Home/components/Sponsors/useSponsorsHook.test.tsx
  • Replaced jest with vi from vitest for mocking buildSlashes and clearing mocks.
  • Corrected the expected value of result.current.slashes to be ////.
• src/views/SessionFeedback/SessionFeedback.test.tsx
  • Replaced jest with vi from vitest for mocking sessionData.
• src/views/Speakers/Speakers.test.tsx
  • Replaced jest with vi from vitest for mocking dependencies.
• src/views/Talks/Talks.tsx
  • Added optional chaining to text in removeParenthesesContent function.
  • Added optional chaining to group?.groupId?.toString().
• src/views/kcd/Kcd.test.tsx
  • Replaced jest with vi from vitest for mocking dependencies.
• src/views/kcd/Kcd.tsx
  • Updated the StyledImage and revealAnimation styled components
• src/vite-env.d.ts
  • Added a reference type for vite/client
• tsconfig.json
  • Set strict and forceConsistentCasingInFileNames to false.
  • Set noEmitOnError to false.
  • Added exclude patterns for test and spec files.
• vite.config.ts
  • Created a new vite.config.ts file to configure Vite, including plugins, resolve aliases, define environment variables, and set build and server options.
  • Configured test environment with vitest

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

---

From CRA's confines, a new flight,
Vite's speed and ease, a welcome sight.
No more waiting long,
Builds now swift and strong,
A modern toolkit, shining bright.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request migrates the project from Create React App to Vite, which is a significant change. The changes include updating dependencies, build scripts, test configurations, and mock implementations. Overall, the migration seems well-structured, but there are a few areas that need attention to ensure correctness and maintainability.

Summary of Findings

• Migration to Vite: The pull request migrates the project from Create React App to Vite, which should improve build and development performance. However, it's important to ensure all configurations and dependencies are correctly set up for Vite.
• Testing Framework Update: The project updates the testing framework from Jest to Vitest. This requires updating test files and configurations to be compatible with Vitest.
• Mocks with Vitest: The pull request updates the mocks to use vi from Vitest instead of jest. Ensure that all mocks are correctly implemented and that the tests are passing.
• Inconsistent use of mocked function: There are some inconsistencies in how mocked functions are called and reset. Ensure that vi.mocked is used consistently and that mocks are cleared correctly after each test.
• Type safety: The pull request disables strict type checking in tsconfig.json. While this might be necessary for the migration, it's important to re-enable strict type checking as soon as possible to improve code quality and prevent runtime errors.

Merge Readiness

The pull request introduces significant changes related to the migration to Vite and the update of the testing framework. While the changes seem well-structured, there are several medium and high severity issues that need to be addressed before merging. Specifically, the inconsistencies in mock implementations and the disabling of strict type checking should be resolved. I am unable to approve this pull request, and recommend that it not be merged until these issues are addressed and the tests are passing. It is also recommended that others review and approve this code before merging.

[netlify]

✅ Deploy Preview for dev-bcn ready!

Name	Link
🔨 Latest commit	a540e0f
🔍 Latest deploy log	https://app.netlify.com/sites/dev-bcn/deploys/6823455b5c8a6400088c39a5
😎 Deploy Preview	https://deploy-preview-706--dev-bcn.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 42 Accessibility: 100 Best Practices: 92 SEO: 100 PWA: 90 View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[sonarqubecloud]

Quality Gate failed

Failed conditions
0.0% Coverage on New Code (required ≥ 75%)
3.3% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud