Replace deprecated testing library in unit tests

[mproffitt]

What changed?

This commit upgrades the testing library from react-test-renderer to @testing-library/react.

This largely results in changes to renderer.create().toJSON() becoming render().asFragment(). To ensure minimal snapshot changes were recorded, I used firstChild from the fragment so the fragment wrapper was not added to the snapshots.

Why was this change made?

This change was made to replace the deprecated react-test-renderer with a more modern equivelent which is compatible with future versions of React framework

Side effects

During testing, a large number of failure messages such as:

An empty string ("") was passed to the src attribute

This message would cause tests to fail and is the result of svg images being passed to the fileMock in ui/lib/fileMock.js

To resolve this, I have replaced svg management with jest-transformer-svg and introduced a helper method to convert imported svg images to a usable base64 encoded version for use in CSS styling

[erikgb]

Seems like the package intentions is to support newer versions of Jest, ref. Em-Ant/jest-transformer-svg#5. Maybe we should file an issue and eventually help with fixing the Jest 29 support?

[casibbald]

Ideal if we can.

…

On Sun, 19 Jan 2025 at 12:55, Erik Godding Boye ***@***.***> wrote: Seems like the package intentions is to support newer versions of Jest, ref. Em-Ant/jest-transformer-svg#5 <Em-Ant/jest-transformer-svg#5>. Maybe we should file an issue and eventually help with fixing the Jest 29 support? — Reply to this email directly, view it on GitHub <#4572 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAA6C3ZYHDSDVD4XVGSZ2A32LOACTAVCNFSM6AAAAABVOPJMUWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMMBQHAYDQMJVHE> . You are receiving this because your review was requested.Message ID: ***@***.***>

[mproffitt]

I've done some more digging on this and it's not a bug in the jest-transformer-svg library, rather it's related to these lines from DarkModeSwitch.tsx

weave-gitops/ui/components/DarkModeSwitch.tsx

Lines 28 to 34 in 22a1bd7

	.MuiSwitch-thumb {
	color: #fff;
	background-image: url(${(props) =>
	props.theme.mode === ThemeTypes.Dark
	? images.darkModeIcon
	: images.lightModeIcon});
	}

This seems to be the result of this issue in jest-styled-components styled-components/jest-styled-components#97 which causes an SVG to be embedded somehow in a way that cannot be parsed correctly.

From what I understand, the correct behaviour to resolve this would be to encode the images as base64 instead of plain XML. This would allow both the browser, and the tests to interpret them properly instead of them only being interpretable inside the browser.

[mproffitt]

Introduced a util method to convert from image/svg+xml to image/svg+xml;base64 - this allows tests to pass without interfering with the front end

[erikgb]

Introduced a util method to convert from image/svg+xml to image/svg+xml;base64 - this allows tests to pass without interfering with the front end

Sounds good! Does this mean the PR is reviewable/mergeable? Maybe update the PR description with the latest news? 😉

[mproffitt]

It should be reviewable yes. I'd like to wait for @gusevda as he has way more experience with Typescript than I do and may know of a better way to solve the same issue.

[gusevda]

Looks great to me!
Only one comment which should not block merging. I'm not sure about use of .firstChild(). If it's only about existing snapshots, I would not worry about them. We are not changing the implementation in this PR, only tests, so we can be sure that we are not introducing any new bugs, so we can safely update all the snapshots. Use of firstChild() can be confusing for developers in the future.

[mproffitt]

I think if you're happy for it to go, it's a sed followed by yarn command to drop them and I'd rather start as we mean to go on. Lets set a precedence with choosing the least confusing route for devs 😸

[gusevda]

Awesome!