@wordpress/data 7.3.0 → 7.4.0

package/src/components/use-select/test/suspense.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -109,8 +109,8 @@ describe( 'useSuspenseSelect', () => {
 			</RegistryProvider>
 		);
 
-		const rendered = render( <App /> );
-		await waitFor( () => rendered.getByLabelText( 'loaded' ) );
+		render( <App /> );
+		await screen.findByLabelText( 'loaded' );
 
 		// Verify there were 3 attempts to render. Suspended twice because of
 		// `getToken` and `getData` selectors not being resolved, and then finally
@@ -156,9 +156,9 @@ describe( 'useSuspenseSelect', () => {
 			</RegistryProvider>
 		);
 
-		const rendered = render( <App /> );
-		const label = await waitFor( () => rendered.getByLabelText( 'error' ) );
-		expect( label.textContent ).toBe( 'resolution failed' );
+		render( <App /> );
+		const label = await screen.findByLabelText( 'error' );
+		expect( label ).toHaveTextContent( 'resolution failed' );
 		expect( console ).toHaveErrored();
 	} );
 } );

package/src/components/with-dispatch/test/index.js

@@ -1,7 +1,13 @@
 /**
  * External dependencies
  */
-import TestRenderer, { act } from 'react-test-renderer';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { memo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -10,224 +16,156 @@ import withDispatch from '../';
 import { createRegistry } from '../../../registry';
 import { RegistryProvider } from '../../registry-provider';
 
-describe( 'withDispatch', () => {
-	let registry;
-	beforeEach( () => {
-		registry = createRegistry();
-	} );
+jest.useRealTimers();
 
-	it( 'passes the relevant data to the component', () => {
-		const store = registry.registerStore( 'counter', {
-			reducer: ( state = 0, action ) => {
-				if ( action.type === 'increment' ) {
-					return state + action.count;
-				}
-				return state;
-			},
-			actions: {
-				increment: ( count = 1 ) => ( { type: 'increment', count } ),
-			},
-		} );
-
-		const Component = withDispatch( ( _dispatch, ownProps ) => {
+describe( 'withDispatch', () => {
+	const storeOptions = {
+		reducer: ( state = 0, action ) => {
+			if ( action.type === 'inc' ) {
+				return state + action.count;
+			}
+			return state;
+		},
+		actions: {
+			increment: ( count = 1 ) => ( { type: 'inc', count } ),
+		},
+		selectors: {
+			getCount: ( state ) => state,
+		},
+	};
+
+	it( 'passes the relevant data to the component', async () => {
+		const user = userEvent.setup();
+		const registry = createRegistry();
+		registry.registerStore( 'counter', storeOptions );
+
+		const ButtonSpy = jest.fn( ( { onClick } ) => (
+			<button onClick={ onClick } />
+		) );
+		const Button = memo( ButtonSpy );
+
+		const Component = withDispatch( ( dispatch, ownProps ) => {
 			const { count } = ownProps;
 
 			return {
 				increment: () => {
 					const actionReturnedFromDispatch = Promise.resolve(
-						_dispatch( 'counter' ).increment( count )
+						dispatch( 'counter' ).increment( count )
 					);
 					return expect(
 						actionReturnedFromDispatch
 					).resolves.toEqual( {
-						type: 'increment',
+						type: 'inc',
 						count,
 					} );
 				},
 			};
-		} )( ( props ) => <button onClick={ props.increment } /> );
-
-		let testRenderer;
-		act( () => {
-			testRenderer = TestRenderer.create(
-				<RegistryProvider value={ registry }>
-					<Component count={ 0 } />
-				</RegistryProvider>
-			);
-		} );
-		const testInstance = testRenderer.root;
+		} )( ( props ) => <Button onClick={ props.increment } /> );
 
-		const incrementBeforeSetProps =
-			testInstance.findByType( 'button' ).props.onClick;
+		const { rerender } = render(
+			<RegistryProvider value={ registry }>
+				<Component count={ 0 } />
+			</RegistryProvider>
+		);
 
 		// Verify that dispatch respects props at the time of being invoked by
 		// changing props after the initial mount.
-		act( () => {
-			testRenderer.update(
-				<RegistryProvider value={ registry }>
-					<Component count={ 2 } />
-				</RegistryProvider>
-			);
-		} );
-
-		// Function value reference should not have changed in props update.
-		expect( testInstance.findByType( 'button' ).props.onClick ).toBe(
-			incrementBeforeSetProps
+		rerender(
+			<RegistryProvider value={ registry }>
+				<Component count={ 2 } />
+			</RegistryProvider>
 		);
 
-		act( () => {
-			incrementBeforeSetProps();
-		} );
+		// Function value reference should not have changed in props update.
+		// The spy method is only called during inital render.
+		expect( ButtonSpy ).toBeCalledTimes( 1 );
 
-		expect( store.getState() ).toBe( 2 );
+		await user.click( screen.getByRole( 'button' ) );
+		expect( registry.select( 'counter' ).getCount() ).toBe( 2 );
 	} );
 
-	it( 'calls dispatch on the correct registry if updated', () => {
-		const reducer = ( state = null ) => state;
-		const noop = () => ( { type: '__INERT__' } );
-		const firstRegistryAction = jest.fn().mockImplementation( noop );
-		const secondRegistryAction = jest.fn().mockImplementation( noop );
+	it( 'calls dispatch on the correct registry if updated', async () => {
+		const user = userEvent.setup();
 
-		const firstRegistry = registry;
-		firstRegistry.registerStore( 'demo', {
-			reducer,
-			actions: {
-				noop: firstRegistryAction,
-			},
-		} );
+		const firstRegistry = createRegistry();
+		firstRegistry.registerStore( 'demo', storeOptions );
 
-		const Component = withDispatch( ( _dispatch ) => {
-			const noopByReference = _dispatch( 'demo' ).noop;
+		const secondRegistry = createRegistry();
+		secondRegistry.registerStore( 'demo', storeOptions );
 
+		const Component = withDispatch( ( dispatch ) => {
 			return {
-				noop() {
-					_dispatch( 'demo' ).noop();
-					noopByReference();
+				increment() {
+					dispatch( 'demo' ).increment();
 				},
 			};
-		} )( ( props ) => <button onClick={ props.noop } /> );
-
-		let testRenderer;
-		act( () => {
-			testRenderer = TestRenderer.create(
-				<RegistryProvider value={ firstRegistry }>
-					<Component />
-				</RegistryProvider>
-			);
-		} );
-		const testInstance = testRenderer.root;
-
-		act( () => {
-			testInstance.findByType( 'button' ).props.onClick();
-		} );
-		expect( firstRegistryAction ).toHaveBeenCalledTimes( 2 );
-		expect( secondRegistryAction ).toHaveBeenCalledTimes( 0 );
+		} )( ( props ) => <button onClick={ props.increment } /> );
 
-		const secondRegistry = createRegistry();
-		secondRegistry.registerStore( 'demo', {
-			reducer,
-			actions: {
-				noop: secondRegistryAction,
-			},
-		} );
-
-		act( () => {
-			testRenderer.update(
-				<RegistryProvider value={ secondRegistry }>
-					<Component />
-				</RegistryProvider>
-			);
-		} );
-		act( () => {
-			testInstance.findByType( 'button' ).props.onClick();
-		} );
-		expect( firstRegistryAction ).toHaveBeenCalledTimes( 2 );
-		expect( secondRegistryAction ).toHaveBeenCalledTimes( 2 );
+		const { rerender } = render(
+			<RegistryProvider value={ firstRegistry }>
+				<Component />
+			</RegistryProvider>
+		);
+
+		await user.click( screen.getByRole( 'button' ) );
+		expect( firstRegistry.select( 'demo' ).getCount() ).toBe( 1 );
+		expect( secondRegistry.select( 'demo' ).getCount() ).toBe( 0 );
+
+		rerender(
+			<RegistryProvider value={ secondRegistry }>
+				<Component />
+			</RegistryProvider>
+		);
+		await user.click( screen.getByRole( 'button' ) );
+		expect( firstRegistry.select( 'demo' ).getCount() ).toBe( 1 );
+		expect( secondRegistry.select( 'demo' ).getCount() ).toBe( 1 );
 	} );
 
-	it(
-		'always calls select with the latest state in the handler passed to ' +
-			'the component',
-		() => {
-			const store = registry.registerStore( 'counter', {
-				reducer: ( state = 0, action ) => {
-					if ( action.type === 'update' ) {
-						return action.count;
-					}
-					return state;
-				},
-				actions: {
-					update: ( count ) => ( { type: 'update', count } ),
-				},
-				selectors: {
-					getCount: ( state ) => state,
+	it( 'always calls select with the latest state in the handler passed to the component', async () => {
+		const user = userEvent.setup();
+		const registry = createRegistry();
+		registry.registerStore( 'counter', storeOptions );
+
+		const Component = withDispatch( ( dispatch, ownProps, { select } ) => {
+			return {
+				update: () => {
+					const currentCount = select( 'counter' ).getCount();
+					dispatch( 'counter' ).increment( currentCount + 1 );
 				},
-			} );
-
-			const Component = withDispatch(
-				( _dispatch, ownProps, { select: _select } ) => {
-					const outerCount = _select( 'counter' ).getCount();
-					return {
-						update: () => {
-							const innerCount = _select( 'counter' ).getCount();
-							expect( innerCount ).toBe( outerCount );
-							const actionReturnedFromDispatch = Promise.resolve(
-								_dispatch( 'counter' ).update( innerCount + 1 )
-							);
-							return expect(
-								actionReturnedFromDispatch
-							).resolves.toEqual( {
-								type: 'update',
-								count: innerCount + 1,
-							} );
-						},
-					};
-				}
-			)( ( props ) => <button onClick={ props.update } /> );
-
-			let testRenderer;
-			act( () => {
-				testRenderer = TestRenderer.create(
-					<RegistryProvider value={ registry }>
-						<Component />
-					</RegistryProvider>
-				);
-			} );
-
-			const counterUpdateHandler =
-				testRenderer.root.findByType( 'button' ).props.onClick;
-
-			act( () => {
-				counterUpdateHandler();
-			} );
-			expect( store.getState() ).toBe( 1 );
-
-			act( () => {
-				counterUpdateHandler();
-			} );
-			expect( store.getState() ).toBe( 2 );
-
-			act( () => {
-				counterUpdateHandler();
-			} );
-			expect( store.getState() ).toBe( 3 );
-		}
-	);
+			};
+		} )( ( props ) => <button onClick={ props.update } /> );
+
+		render(
+			<RegistryProvider value={ registry }>
+				<Component />
+			</RegistryProvider>
+		);
+
+		await user.click( screen.getByRole( 'button' ) );
+		// expectedValue = 2 * currentValue + 1.
+		expect( registry.select( 'counter' ).getCount() ).toBe( 1 );
+
+		await user.click( screen.getByRole( 'button' ) );
+		expect( registry.select( 'counter' ).getCount() ).toBe( 3 );
+
+		await user.click( screen.getByRole( 'button' ) );
+		expect( registry.select( 'counter' ).getCount() ).toBe( 7 );
+	} );
 
 	it( 'warns when mapDispatchToProps returns non-function property', () => {
+		const registry = createRegistry();
 		const Component = withDispatch( () => {
 			return {
 				count: 3,
 			};
 		} )( () => null );
 
-		act( () => {
-			TestRenderer.create(
-				<RegistryProvider value={ registry }>
-					<Component />
-				</RegistryProvider>
-			);
-		} );
+		render(
+			<RegistryProvider value={ registry }>
+				<Component />
+			</RegistryProvider>
+		);
+
 		expect( console ).toHaveWarnedWith(
 			'Property count returned from dispatchMap in useDispatchWithMap must be a function.'
 		);