diff --git a/packages/components/src/button/test/index.tsx b/packages/components/src/button/test/index.tsx
index 8161e68c4e21b..664c755ac4404 100644
--- a/packages/components/src/button/test/index.tsx
+++ b/packages/components/src/button/test/index.tsx
@@ -6,19 +6,26 @@ import { render, screen } from '@testing-library/react';
/**
* WordPress dependencies
*/
-import { createRef } from '@wordpress/element';
+import { createRef, forwardRef } from '@wordpress/element';
import { plusCircle } from '@wordpress/icons';
/**
* Internal dependencies
*/
-import Button from '..';
+import _Button from '..';
import Tooltip from '../../tooltip';
import cleanupTooltip from '../../tooltip/test/utils';
import { press } from '@ariakit/test';
jest.mock( '../../icon', () => () =>
);
+const Button = forwardRef(
+ (
+ props: React.ComponentProps< typeof _Button >,
+ ref: React.ForwardedRef< unknown >
+ ) => <_Button __next40pxDefaultSize { ...props } ref={ ref } />
+);
+
describe( 'Button', () => {
describe( 'basic rendering', () => {
it( 'should render a button element with only one class', () => {
diff --git a/packages/components/src/navigator/test/index.tsx b/packages/components/src/navigator/test/index.tsx
index cab6e9a4cdadf..07b118eaaef70 100644
--- a/packages/components/src/navigator/test/index.tsx
+++ b/packages/components/src/navigator/test/index.tsx
@@ -75,6 +75,7 @@ function CustomNavigatorButton( {
} ) {
return (
{
// Used to spy on the values passed to `navigator.goTo`.
onClick?.( { type: 'goTo', path } );
@@ -95,6 +96,7 @@ function CustomNavigatorGoToBackButton( {
const { goTo } = useNavigator();
return (