diff --git a/packages/editor/src/components/document-outline/test/__snapshots__/index.js.snap b/packages/editor/src/components/document-outline/test/__snapshots__/index.js.snap
index 09fcb9a5316669..27804e33f508b6 100644
--- a/packages/editor/src/components/document-outline/test/__snapshots__/index.js.snap
+++ b/packages/editor/src/components/document-outline/test/__snapshots__/index.js.snap
@@ -1,67 +1,111 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DocumentOutline header blocks present should match snapshot 1`] = `
-<div
-  className="document-outline"
->
-  <ul>
-    <TableOfContentsItem
+<ul>
+  <li
+    class="document-outline__item is-h2"
+  >
+    <a
+      class="document-outline__button"
       href="#block-clientId_0"
-      isValid={true}
-      key="0"
-      level="H2"
     >
-      Heading 2
-    </TableOfContentsItem>
-    <TableOfContentsItem
+      <span
+        aria-hidden="true"
+        class="document-outline__emdash"
+      />
+      <strong
+        class="document-outline__level"
+      >
+        H2
+      </strong>
+      <span
+        class="document-outline__item-content"
+      >
+        Heading 2
+      </span>
+    </a>
+  </li>
+  <li
+    class="document-outline__item is-h3"
+  >
+    <a
+      class="document-outline__button"
       href="#block-clientId_1"
-      isValid={true}
-      key="1"
-      level="H3"
     >
-      Heading 3
-    </TableOfContentsItem>
-  </ul>
-</div>
+      <span
+        aria-hidden="true"
+        class="document-outline__emdash"
+      />
+      <strong
+        class="document-outline__level"
+      >
+        H3
+      </strong>
+      <span
+        class="document-outline__item-content"
+      >
+        Heading 3
+      </span>
+    </a>
+  </li>
+</ul>
 `;
 
 exports[`DocumentOutline header blocks present should render warnings for multiple h1 headings 1`] = `
-<div
-  className="document-outline"
->
-  <ul>
-    <TableOfContentsItem
+<ul>
+  <li
+    class="document-outline__item is-h1 is-invalid"
+  >
+    <a
+      class="document-outline__button"
       href="#block-clientId_0"
-      isValid={false}
-      key="0"
-      level="H1"
     >
-      Heading 1
-      <br
-        key="incorrect-break-multiple-h1"
+      <span
+        aria-hidden="true"
+        class="document-outline__emdash"
       />
-      <em
-        key="incorrect-message-multiple-h1"
+      <strong
+        class="document-outline__level"
       >
-        (Multiple H1 headings are not recommended)
-      </em>
-    </TableOfContentsItem>
-    <TableOfContentsItem
+        H1
+      </strong>
+      <span
+        class="document-outline__item-content"
+      >
+        Heading 1
+        <br />
+        <em>
+          (Multiple H1 headings are not recommended)
+        </em>
+      </span>
+    </a>
+  </li>
+  <li
+    class="document-outline__item is-h1 is-invalid"
+  >
+    <a
+      class="document-outline__button"
       href="#block-clientId_2"
-      isValid={false}
-      key="1"
-      level="H1"
     >
-      Heading 1
-      <br
-        key="incorrect-break-multiple-h1"
+      <span
+        aria-hidden="true"
+        class="document-outline__emdash"
       />
-      <em
-        key="incorrect-message-multiple-h1"
+      <strong
+        class="document-outline__level"
+      >
+        H1
+      </strong>
+      <span
+        class="document-outline__item-content"
       >
-        (Multiple H1 headings are not recommended)
-      </em>
-    </TableOfContentsItem>
-  </ul>
-</div>
+        Heading 1
+        <br />
+        <em>
+          (Multiple H1 headings are not recommended)
+        </em>
+      </span>
+    </a>
+  </li>
+</ul>
 `;
diff --git a/packages/editor/src/components/document-outline/test/index.js b/packages/editor/src/components/document-outline/test/index.js
index c4d39926dd907e..bf6ebbaa2b7e06 100644
--- a/packages/editor/src/components/document-outline/test/index.js
+++ b/packages/editor/src/components/document-outline/test/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { mount, shallow } from 'enzyme';
+import { render, screen, within } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -77,9 +77,9 @@ describe( 'DocumentOutline', () => {
 
 	describe( 'no header blocks present', () => {
 		it( 'should not render when no blocks provided', () => {
-			const wrapper = shallow( <DocumentOutline /> );
+			render( <DocumentOutline /> );
 
-			expect( wrapper.html() ).toBe( null );
+			expect( screen.queryByRole( 'list' ) ).not.toBeInTheDocument();
 		} );
 
 		it( 'should not render when no heading blocks provided', () => {
@@ -87,9 +87,9 @@ describe( 'DocumentOutline', () => {
 				// Set client IDs to a predictable value.
 				return { ...block, clientId: `clientId_${ index }` };
 			} );
-			const wrapper = shallow( <DocumentOutline blocks={ blocks } /> );
+			render( <DocumentOutline blocks={ blocks } /> );
 
-			expect( wrapper.html() ).toBe( null );
+			expect( screen.queryByRole( 'list' ) ).not.toBeInTheDocument();
 		} );
 	} );
 
@@ -99,16 +99,20 @@ describe( 'DocumentOutline', () => {
 				// Set client IDs to a predictable value.
 				return { ...block, clientId: `clientId_${ index }` };
 			} );
-			const wrapper = shallow( <DocumentOutline blocks={ blocks } /> );
+			render( <DocumentOutline blocks={ blocks } /> );
 
-			expect( wrapper ).toMatchSnapshot();
+			expect( screen.getByRole( 'list' ) ).toMatchSnapshot();
 		} );
 
 		it( 'should render an item when only one heading provided', () => {
 			const blocks = [ headingH2 ];
-			const wrapper = shallow( <DocumentOutline blocks={ blocks } /> );
+			render( <DocumentOutline blocks={ blocks } /> );
 
-			expect( wrapper.find( 'TableOfContentsItem' ) ).toHaveLength( 1 );
+			const tableOfContentItems = within(
+				screen.getByRole( 'list' )
+			).getAllByRole( 'listitem' );
+			expect( tableOfContentItems ).toHaveLength( 1 );
+			expect( tableOfContentItems[ 0 ] ).toHaveTextContent( 'Heading 2' );
 		} );
 
 		it( 'should render two items when two headings and some paragraphs provided', () => {
@@ -119,9 +123,11 @@ describe( 'DocumentOutline', () => {
 				headingH3,
 				paragraph,
 			];
-			const wrapper = shallow( <DocumentOutline blocks={ blocks } /> );
+			render( <DocumentOutline blocks={ blocks } /> );
 
-			expect( wrapper.find( 'TableOfContentsItem' ) ).toHaveLength( 2 );
+			expect(
+				within( screen.getByRole( 'list' ) ).getAllByRole( 'listitem' )
+			).toHaveLength( 2 );
 		} );
 
 		it( 'should render warnings for multiple h1 headings', () => {
@@ -131,53 +137,30 @@ describe( 'DocumentOutline', () => {
 					return { ...block, clientId: `clientId_${ index }` };
 				}
 			);
-			const wrapper = shallow( <DocumentOutline blocks={ blocks } /> );
+			render( <DocumentOutline blocks={ blocks } /> );
 
-			expect( wrapper ).toMatchSnapshot();
+			expect( screen.getByRole( 'list' ) ).toMatchSnapshot();
 		} );
 	} );
 
 	describe( 'nested headings', () => {
 		it( 'should render even if the heading is nested', () => {
-			const tableOfContentItemsSelector = 'TableOfContentsItem';
-			const outlineLevelsSelector = '.document-outline__level';
-			const outlineItemContentSelector =
-				'.document-outline__item-content';
-
 			const blocks = [ headingH2, nestedHeading ];
-			const wrapper = mount( <DocumentOutline blocks={ blocks } /> );
+			render( <DocumentOutline blocks={ blocks } /> );
 
 			// Unnested heading and nested heading should appear as items.
-			const tableOfContentItems = wrapper.find(
-				tableOfContentItemsSelector
-			);
+			const tableOfContentItems = within(
+				screen.getByRole( 'list' )
+			).getAllByRole( 'listitem' );
 			expect( tableOfContentItems ).toHaveLength( 2 );
 
 			// Unnested heading test.
-			const firstItemLevels = tableOfContentItems
-				.at( 0 )
-				.find( outlineLevelsSelector );
-			expect( firstItemLevels ).toHaveLength( 1 );
-			expect( firstItemLevels.at( 0 ).text() ).toEqual( 'H2' );
-			expect(
-				tableOfContentItems
-					.at( 0 )
-					.find( outlineItemContentSelector )
-					.text()
-			).toEqual( 'Heading 2' );
+			expect( tableOfContentItems[ 0 ] ).toHaveTextContent( 'H2' );
+			expect( tableOfContentItems[ 0 ] ).toHaveTextContent( 'Heading 2' );
 
 			// Nested heading test.
-			const secondItemLevels = tableOfContentItems
-				.at( 1 )
-				.find( outlineLevelsSelector );
-			expect( secondItemLevels ).toHaveLength( 1 );
-			expect( secondItemLevels.at( 0 ).text() ).toEqual( 'H3' );
-			expect(
-				tableOfContentItems
-					.at( 1 )
-					.find( outlineItemContentSelector )
-					.text()
-			).toEqual( 'Heading 3' );
+			expect( tableOfContentItems[ 1 ] ).toHaveTextContent( 'H3' );
+			expect( tableOfContentItems[ 1 ] ).toHaveTextContent( 'Heading 3' );
 		} );
 	} );
 } );