test(react): wait for hmr update to reduce flakyness by sapphi-red · Pull Request #459 · vitejs/vite-plugin-react

sapphi-red · 2025-04-16T05:56:28Z

Description

The following test failed some times in the following condition

vite-plugin-react/playground/react/__tests__/react.spec.ts

Lines 74 to 94 in ce0de3e

    
             test('should only hmr files with exported react components', async () => { 
        
               await untilBrowserLogAfter( 
        
                 () => 
        
                   editFile('hmr/no-exported-comp.jsx', (code) => 
        
                     code.replace('An Object', 'Updated'), 
        
                   ), 
        
                 [ 
        
                   new RegExp( 
        
                     `^${escapeRegex( 
        
                       '[vite] invalidate /hmr/no-exported-comp.jsx: Could not Fast Refresh ("Foo" export is incompatible). Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/', 
        
                     )}plugin-react(?:-\\w+)?${escapeRegex( 
        
                       '#consistent-components-exports', 
        
                     )}`, 
        
                   ), 
        
                   '[vite] hot updated: /hmr/no-exported-comp.jsx', 
        
                   '[vite] hot updated: /hmr/parent.jsx', 
        
                   'Parent rendered', 
        
                 ], 
        
               ) 
        
               await untilUpdated(() => page.textContent('#parent'), 'Updated') 
        
             })

these edits were executed fast enough to be processed in a single update:

vite-plugin-react/playground/react/__tests__/react.spec.ts

Lines 49 to 51 in a758bfe

    
           editFile('App.jsx', (code) => 
        
             code.replace('<div className="App"}>', '<div className="App">'), 
        
           )

vite-plugin-react/playground/react/__tests__/react.spec.ts

Lines 73 to 75 in a758bfe

    
           editFile('hmr/no-exported-comp.jsx', (code) => 
        
             code.replace('An Object', 'Updated'), 
        
           ),

In that case, allExportsAreComponentsOrUnchanged probably becomes true because of prevExports[key] === nextExports[key], and import.meta.hot.invalidate won't be called.

vite-plugin-react/packages/common/refresh-runtime.js

Line 615 in a758bfe

const allExportsAreComponentsOrUnchanged = predicateOnExport(

This PR fixes that flaky fail by waiting for the update to be processed.

test(react): wait for hmr update to reduce flakyness

ce0de3e

sapphi-red added the p1-chore 🧹 Doesn't change code behavior (priority) label Apr 16, 2025

sapphi-red mentioned this pull request Apr 16, 2025

fix(hmr): avoid infinite loop happening with hot.invalidate in circular deps vitejs/vite#19870

Merged

ArnaudBarre approved these changes Apr 16, 2025

View reviewed changes

sapphi-red merged commit da18c65 into main Apr 16, 2025
10 checks passed

sapphi-red deleted the test/react-hmr-wait-for-update branch April 16, 2025 09:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Comments

test(react): wait for hmr update to reduce flakyness#459

test(react): wait for hmr update to reduce flakyness#459
sapphi-red merged 1 commit intomainfrom
test/react-hmr-wait-for-update

sapphi-red commented Apr 16, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	test('should only hmr files with exported react components', async () => {
	await untilBrowserLogAfter(
	() =>
	editFile('hmr/no-exported-comp.jsx', (code) =>
	code.replace('An Object', 'Updated'),
	),
	[
	new RegExp(
	`^${escapeRegex(
	'[vite] invalidate /hmr/no-exported-comp.jsx: Could not Fast Refresh ("Foo" export is incompatible). Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/',
	)}plugin-react(?:-\\w+)?${escapeRegex(
	'#consistent-components-exports',
	)}`,
	),
	'[vite] hot updated: /hmr/no-exported-comp.jsx',
	'[vite] hot updated: /hmr/parent.jsx',
	'Parent rendered',
	],
	)
	await untilUpdated(() => page.textContent('#parent'), 'Updated')
	})

	editFile('App.jsx', (code) =>
	code.replace('<div className="App"}>', '<div className="App">'),
	)

Uh oh!

Comments

Conversation

sapphi-red commented Apr 16, 2025

Description

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants