PIMS-394/392/398 Updated vite, vite-plugin-svgr, vitejs/plugin-react

[dbarkowsky]

🎯 Summary

PIMS-394
PIMS-392
PIMS-398

• Updated vite to 4.5.0
• Updated vite-plugin-svgr to 4.1.0
• Updated @vitejs/plugin-react to 4.1.1

vite-plugin-svgr update came with breaking changes to how SVG files are rendered.

OLD

import { ReactComponent as BuildingSvg } from 'assets/images/icon-business.svg';

NEW

/// <reference types="vite-plugin-svgr/client" />
import BuildingSvg from 'assets/images/icon-business.svg?react';

The reference line must be included for TypeScript to understand what the import is doing. Use it once at the very beginning of any file you use SVGs in.

Changes to Testing

When the imports change to have the ?react ending, it breaks the way react-scripts & Jest render the SVGs because it cannot find the file with that Vite-specific configuration.

To get around this, I added a section the package.json that will look to a newly-created mock SVG for any imports. This means the mock will be seen in the snapshot tests, so those had to be updated. It does mean that we wouldn't be able to test for specific SVGs on screen, but so far that hasn't come up.

🔰 Checklist

• I have read and agree with the following checklist and am following the guidelines in our Code of Conduct document.

• I have performed a self-review of my code.
• I have commented my code, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation where required.
• I have tested my changes to the best of my ability.
• My changes generate no new warnings.

[codeclimate]

Code Climate has analyzed commit ef16b65 and detected 0 issues on this pull request.

The test coverage on the diff in this pull request is 100.0% (50% is the threshold).

This pull request will bring the total coverage in the repository to 55.3%.

View more on Code Climate.

[github-actions]

🚀 Deployment Information

The APP Image has been built with the tag: 1903. Please make sure to utilize this specific tag when promoting these changes to the TEST and PROD environments during the APP deployment. For more updates please monitor Image Tags Page on Wiki.

[LawrenceLau2020]

Looks good, no errors.