diff --git a/packages/components/src/guide/test/page-control.js b/packages/components/src/guide/test/page-control.js
index cc9509e8be5c0..caeb3dd005476 100644
--- a/packages/components/src/guide/test/page-control.js
+++ b/packages/components/src/guide/test/page-control.js
@@ -1,12 +1,8 @@
/**
* External dependencies
*/
-import { shallow } from 'enzyme';
-
-/**
- * WordPress dependencies
- */
-import { Button } from '@wordpress/components';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
/**
* Internal dependencies
@@ -15,29 +11,30 @@ import PageControl from '../page-control';
describe( 'PageControl', () => {
it( 'renders an empty list when there are no pages', () => {
- const wrapper = shallow(
-
- );
- expect( wrapper.find( Button ) ).toHaveLength( 0 );
+ render( );
+ expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
} );
it( 'renders a button for each page', () => {
- const wrapper = shallow(
-
- );
- expect( wrapper.find( Button ) ).toHaveLength( 5 );
+ render( );
+ expect( screen.getAllByRole( 'button' ) ).toHaveLength( 5 );
} );
- it( 'sets the current page when a button is clicked', () => {
+ it( 'sets the current page when a button is clicked', async () => {
+ const user = userEvent.setup( {
+ advanceTimers: jest.advanceTimersByTime,
+ } );
const setCurrentPage = jest.fn();
- const wrapper = shallow(
+ render(
);
- wrapper.find( Button ).at( 1 ).simulate( 'click' );
+
+ await user.click( screen.getAllByRole( 'button' )[ 1 ] );
+
expect( setCurrentPage ).toHaveBeenCalledWith( 1 );
} );
} );