Move to a browser test

andrewserong · Sep 30, 2026 · Sep 23, 2026 · Sep 29, 2026 · Sep 29, 2026 · Sep 29, 2026
commit eebf80eeef109b09d76cb31ccfcd394a10060754
diff --git a/packages/dataviews/src/dataviews/test/dataviews.jsdom.test.tsx b/packages/dataviews/src/dataviews/test/dataviews.jsdom.test.tsx
@@ -751,27 +751,6 @@ describe( 'DataViews component', () => {
 	} );
 
 	describe( 'in grid view', () => {
-		it( 'lays the grid out at its real column count on the first render', async () => {
-			// Without a measurement as the grid attaches, the first render runs
-			// at width 0 and puts every item in a full-width row of its own.
-			vi.spyOn(
-				window.HTMLElement.prototype,
-				'offsetWidth',
-				'get'
-			).mockReturnValue( 500 );
-
-			render( <DataViewWrapper view={ { type: 'grid' } } /> );
-
-			// 500px fits two columns at the default 230px preview size, so the
-			// three items make two rows rather than three.
-			expect( screen.getAllByRole( 'row' ) ).toHaveLength( 2 );
-
-			// The observer reports the same width, so nothing changes.
-			await waitFor( () =>
-				expect( screen.getAllByRole( 'row' ) ).toHaveLength( 2 )
-			);
-		} );
-
 		it( 'should display the passed in data', async () => {
 			render(
 				<DataViewWrapper

@@ -0,0 +1,79 @@
+import { screen, waitFor } from '@testing-library/react';
+import { render } from 'vitest-browser-react';
+import { describe, expect, it } from 'vitest';
+import { useLayoutEffect } from '@wordpress/element';
+import DataViews from '../index';
+import { LAYOUT_GRID } from '../../constants';
+import type { View } from '../../types';
+
+type Data = {
+	id: number;
+	title: string;
+};
+
+const view: View = {
+	type: LAYOUT_GRID,
+	search: '',
+	page: 1,
+	perPage: 10,
+	layout: {},
+	filters: [],
+	fields: [ 'title' ],
+	titleField: 'title',
+};
+
+const data: Data[] = [
+	{ id: 1, title: 'First item' },
+	{ id: 2, title: 'Second item' },
+	{ id: 3, title: 'Third item' },
+];
+
+// Counts the grid rows in the first animation frame after mount. Animation
+// frame callbacks run before resize observer callbacks, so this is the layout
+// the browser paints first.
+function FirstFrameRowCount( {
+	onCount,
+}: {
+	onCount: ( count: number ) => void;
+} ) {
+	useLayoutEffect( () => {
+		requestAnimationFrame( () => {
+			onCount( screen.queryAllByRole( 'row' ).length );
+		} );
+	}, [ onCount ] );
+	return null;
+}
+
+describe( 'DataViews grid columns', () => {
+	it( 'paints the grid at its real column count on the first frame', async () => {
+		let firstFrameRowCount: number | undefined;
+
+		// A 600px wide container fits two columns at the default 230px preview
+		// size, so the three items render as two rows.
+		await render(
+			<div style={ { width: 600 } }>
+				<DataViews< Data >
+					view={ view }
+					onChangeView={ () => {} }
+					fields={ [ { id: 'title', label: 'Title', type: 'text' } ] }
+					data={ data }
+					getItemId={ ( item ) => item.id.toString() }
+					paginationInfo={ { totalItems: 3, totalPages: 1 } }
+					defaultLayouts={ { [ LAYOUT_GRID ]: true } }
+				/>
+				<FirstFrameRowCount
+					onCount={ ( count ) => {
+						if ( firstFrameRowCount === undefined ) {
+							firstFrameRowCount = count;
+						}
+					} }
+				/>
+			</div>
+		);
+
+		await waitFor( () => expect( firstFrameRowCount ).toBe( 2 ) );
+
+		// The observer reports the same width, so nothing changes.
+		expect( screen.getAllByRole( 'row' ) ).toHaveLength( 2 );
+	} );
+} );