test: add ui render for debug ui integration tests

[cryptotavares]

Description

This PR adds UI rendering capabilities for debugging UI integration tests. It introduces the jest-preview package to allow visual inspection of component states during test execution.

Related issues

N/A

Manual testing steps

1. Run the UI integration tests with the new debug rendering enabled
2. Verify that component states can be visually inspected during test runs

Screenshots/Recordings

N/A

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[socket-security]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@babel/[email protected]	environment	0	2.48 MB	nicolo-ribaudo
npm/@polka/[email protected]	None	0	4.49 kB	lukeed
npm/@svgr/[email protected]	None	0	13.2 kB	neoziro
npm/@svgr/[email protected]	None	0	5.01 kB	neoziro
npm/@svgr/[email protected]	None	0	3.71 kB	neoziro
npm/@svgr/[email protected]	None	0	7.04 kB	neoziro
npm/@svgr/[email protected]	None	0	13.8 kB	neoziro
npm/@svgr/[email protected]	None	0	7.99 kB	neoziro
npm/@svgr/[email protected]	None	0	13 kB	neoziro
npm/@svgr/[email protected]	None	0	31.5 kB	neoziro
npm/@svgr/[email protected]	None	0	15.4 kB	neoziro
npm/@svgr/[email protected]	None	0	25.1 kB	neoziro
npm/@svgr/[email protected]	None	0	72.9 kB	neoziro
npm/@svgr/[email protected]	None	0	12.6 kB	neoziro
npm/@szmarczak/[email protected]	None	0	6.3 kB	szmarczak
npm/[email protected]	None	0	7.68 kB	nexdrew
npm/[email protected]	None	0	18.4 kB	sindresorhus
npm/[email protected]	network	+1	29.1 kB	lukechilds
npm/[email protected]	None	0	6.14 kB	sindresorhus
npm/[email protected]	None	+2	20 kB	sindresorhus
npm/[email protected]	None	+1	7.12 kB	sindresorhus
npm/[email protected]	network	0	5.45 kB	szmarczak
npm/[email protected]	None	0	6.28 kB	sindresorhus
npm/[email protected]	Transitive: filesystem	+1	11.7 kB	callumacrae
npm/[email protected]	environment, filesystem	+1	17.8 kB	sindresorhus
npm/[email protected]	filesystem, network	+2	133 kB	sindresorhus
npm/[email protected]	filesystem	0	3.39 kB	sindresorhus
npm/[email protected]	Transitive: environment	+1	16.4 kB	watson
npm/[email protected]	filesystem	0	3.61 kB	sindresorhus
npm/[email protected]	None	0	5.1 kB	sindresorhus
npm/[email protected]	None	0	2.55 kB	litomore
npm/[email protected]	environment, filesystem, shell Transitive: unsafe	+3	857 kB	nvh95
npm/[email protected]	None	0	5.44 kB	dominictarr
npm/[email protected]	None	0	14.7 kB	lukechilds
npm/[email protected]	None	0	4.29 kB	sindresorhus
npm/[email protected]	None	0	7 kB	yeikos
npm/[email protected]	None	0	32.7 kB	lukeed
npm/[email protected]	None	0	18.1 kB	sindresorhus
npm/[email protected]	None	0	12.5 kB	sindresorhus
npm/[email protected]	network	0	14.3 kB	sindresorhus
npm/[email protected]	None	0	27 kB	ryanzim
npm/[email protected]	None	0	2.98 kB	sindresorhus
npm/[email protected]	None	0	4.94 kB	sindresorhus
npm/[email protected]	filesystem	0	4.22 kB	trysound
npm/[email protected]	environment	0	12 kB	rexxars
npm/[email protected]	None	0	4.33 kB	sindresorhus
npm/[email protected]	None	+1	7.08 kB	lukechilds
npm/[email protected]	None	0	5.24 kB	sindresorhus
npm/[email protected]	filesystem	0	20.7 kB	lukeed
npm/[email protected]	None	0	48.9 kB	trysound
npm/[email protected]	None	0	2.79 kB	sindresorhus
npm/[email protected]	filesystem	0	7.46 kB	lukeed
npm/[email protected]	environment, shell	0	15.3 kB	sindresorhus
npm/[email protected]	None	0	4.23 kB	sindresorhus
npm/[email protected]	None	0	3.73 kB	sindresorhus
npm/[email protected]	None	0	5.69 kB	sindresorhus

🚮 Removed packages: npm/@babel/[email protected]

View full report↗︎

[socket-security]

🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎

To accept the risk, merge this PR and you will not be notified again.

Alert	Package	Note	Source	CI
Network access	npm/[email protected]	Module: http Location: Package overview	yarn.lock	🚫
Network access	npm/[email protected]	Module: https Location: Package overview	yarn.lock	🚫
Network access	npm/[email protected]	Module: net Location: Package overview	yarn.lock	🚫
Network access	npm/[email protected]	Module: tls Location: Package overview	yarn.lock	🚫
Shell access	npm/[email protected]	Module: child_process Location: Package overview	package.json yarn.lock	🚫
Install scripts	npm/[email protected]	Install script: postinstall Source: node -e "try{require('./cli/clearCache')}catch(e){console.log(e)}"	package.json yarn.lock	⚠︎

View full report↗︎

Next steps

What is network access?

This module accesses the network.

Packages should remove all network access that is functionally unnecessary. Consumers should audit network access to ensure legitimate use.

What is shell access?

This module accesses the system shell. Accessing the system shell increases the risk of executing arbitrary code.

Packages should avoid accessing the shell which can reduce portability, and make it easier for malicious shell access to be introduced.

What is an install script?

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Packages should not be running non-essential scripts during install and there are often solutions to problems people solve with install scripts that can be run at publish time instead.

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of ecosystem/package-name@version specifiers. e.g. @SocketSecurity ignore npm/[email protected] or ignore all packages with @SocketSecurity ignore-all

• @SocketSecurity ignore npm/[email protected]
• @SocketSecurity ignore npm/[email protected]
• @SocketSecurity ignore npm/[email protected]
• @SocketSecurity ignore npm/[email protected]

[metamaskbot]

Builds ready [343b8c5]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1830 ± 77 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1553	2144	1836	161	77
		domContentLoaded	1546	2115	1797	156	75
		load	1554	2183	1830	160	77
		domInteractive	27	83	50	20	10

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 0 Bytes (0.00%)
• common: 0 Bytes (0.00%)

[sonarcloud]

Quality Gate failed

Failed conditions
0.0% Coverage on New Code (required ≥ 80%)

See analysis details on SonarCloud

[metamaskbot]

Builds ready [350f23d]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1904 ± 61 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	306	2224	1823	369	177
		domContentLoaded	1644	2140	1868	106	51
		load	1693	2228	1904	127	61
		domInteractive	17	127	52	26	12

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 0 Bytes (0.00%)
• common: 0 Bytes (0.00%)

[metamaskbot]

Builds ready [3cd5ec7]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1958 ± 201 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	305	2743	1413	664	319
		domContentLoaded	1571	3088	1929	390	187
		load	1580	3124	1958	418	201
		domInteractive	23	156	53	32	16
		backgroundConnect	8	225	32	47	22
		firstReactRender	46	207	100	47	22
		getState	4	116	22	29	14
		initialActions	0	1	0	0	0
		loadScripts	1146	2613	1451	350	168
		setupStore	10	126	29	28	13
		uiStartup	1731	3696	2214	505	242

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 0 Bytes (0.00%)
• common: 0 Bytes (0.00%)