Render StructTree only when renderTextLayer is true, add unit tests

src/Page.tsx

@@ -306,6 +306,7 @@ export default function Page(props: PageProps) {
           pageIndex,
           pageNumber,
           renderForms,
+          renderTextLayer: renderTextLayerProps,
           rotate,
           scale,
         }

src/Page/PageCanvas.spec.tsx

@@ -1,6 +1,6 @@
 import { beforeAll, describe, expect, it, vi } from 'vitest';
 import React from 'react';
-import { render, waitFor } from '@testing-library/react';
+import { render } from '@testing-library/react';
 
 import { pdfjs } from '../index.test';
 
@@ -104,14 +104,39 @@ describe('PageCanvas', () => {
       expect(canvasRef).toHaveBeenCalledWith(expect.any(HTMLElement));
     });
 
-    it('generates a struct tree inside the canvas', async () => {
-      renderWithContext(<PageCanvas />, {
-        page,
-        scale: 1,
+    it('does not request struct tree to be rendered when renderTextLayer = false', async () => {
+      const { func: onRenderSuccess, promise: onRenderSuccessPromise } = makeAsyncCallback();
+
+      const { container } = renderWithContext(<PageCanvas />, {
+        onRenderSuccess,
+        page: pageWithRendererMocked,
+        renderTextLayer: false,
+      });
+
+      await onRenderSuccessPromise;
+
+      const structTree = container.querySelector('.react-pdf__Page__structTree');
+
+      expect(structTree).not.toBeInTheDocument();
+    });
+
+    it('renders StructTree when given renderTextLayer = true', async () => {
+      const { func: onGetStructTreeSuccess, promise: onGetStructTreeSuccessPromise } =
+        makeAsyncCallback();
+
+      const { container } = renderWithContext(<PageCanvas />, {
+        onGetStructTreeSuccess,
+        page: pageWithRendererMocked,
+        renderTextLayer: true,
       });
 
-      const canvas = document.querySelector('canvas');
-      await waitFor(() => expect(canvas?.children.length).not.toBe(0));
+      expect.assertions(1);
+
+      await onGetStructTreeSuccessPromise;
+
+      const canvas = container.querySelector('canvas') as HTMLCanvasElement;
+
+      expect(canvas.children.length).toBeGreaterThan(0);
     });
   });
 });

src/Page/PageCanvas.tsx

@@ -37,6 +37,7 @@ export default function PageCanvas(props: PageCanvasProps) {
     onRenderSuccess: onRenderSuccessProps,
     page,
     renderForms,
+    renderTextLayer,
     rotate,
     scale,
   } = mergedProps;
@@ -171,7 +172,7 @@ export default function PageCanvas(props: PageCanvasProps) {
         userSelect: 'none',
       }}
     >
-      <StructTree />
+      {renderTextLayer ? <StructTree /> : null}
     </canvas>
   );
 }

src/StructTree.spec.tsx

@@ -135,7 +135,7 @@ describe('StructTree', () => {
       const wrapper = container.firstElementChild as HTMLSpanElement;
 
       expect(wrapper.outerHTML).toBe(
-        '<span><span><span role="heading" aria-level="1" aria-owns="page3R_mcid0"></span><span aria-owns="page3R_mcid1"></span><span aria-owns="page3R_mcid2"></span><span role="figure" aria-owns="page3R_mcid12"></span><span aria-owns="page3R_mcid3"></span><span aria-owns="page3R_mcid4"></span><span role="heading" aria-level="2" aria-owns="page3R_mcid5"></span><span aria-owns="page3R_mcid6"></span><span><span aria-owns="page3R_mcid7"></span><span role="link"><span aria-owns="13R"></span><span aria-owns="page3R_mcid8"></span></span><span aria-owns="page3R_mcid9"></span></span><span aria-owns="page3R_mcid10"></span><span aria-owns="page3R_mcid11"></span></span></span>',
+        '<span class="react-pdf__Page__structTree structTree"><span><span role="heading" aria-level="1" aria-owns="page3R_mcid0"></span><span aria-owns="page3R_mcid1"></span><span aria-owns="page3R_mcid2"></span><span role="figure" aria-owns="page3R_mcid12"></span><span aria-owns="page3R_mcid3"></span><span aria-owns="page3R_mcid4"></span><span role="heading" aria-level="2" aria-owns="page3R_mcid5"></span><span aria-owns="page3R_mcid6"></span><span><span aria-owns="page3R_mcid7"></span><span role="link"><span aria-owns="13R"></span><span aria-owns="page3R_mcid8"></span></span><span aria-owns="page3R_mcid9"></span></span><span aria-owns="page3R_mcid10"></span><span aria-owns="page3R_mcid11"></span></span></span>',
       );
     });
   });

src/StructTree.tsx

@@ -104,5 +104,5 @@ export default function StructTree() {
     return null;
   }
 
-  return <StructTreeItem node={structTree} />;
+  return <StructTreeItem className="react-pdf__Page__structTree structTree" node={structTree} />;
 }

src/StructTreeItem.tsx

@@ -11,10 +11,11 @@ import type { StructTreeContent } from 'pdfjs-dist/types/src/display/api';
 import type { StructTreeNodeWithExtraAttributes } from './shared/types';
 
 type StructTreeItemProps = {
+  className?: string;
   node: StructTreeNodeWithExtraAttributes | StructTreeContent;
 };
 
-export default function StructTreeItem({ node }: StructTreeItemProps) {
+export default function StructTreeItem({ className, node }: StructTreeItemProps) {
   const attributes = useMemo(() => getAttributes(node), [node]);
 
   const children = useMemo(() => {
@@ -34,7 +35,11 @@ export default function StructTreeItem({ node }: StructTreeItemProps) {
     });
   }, [node]);
 
-  return <span {...attributes}>{children}</span>;
+  return (
+    <span className={className} {...attributes}>
+      {children}
+    </span>
+  );
 }
 
 StructTreeItem.propTypes = {

src/shared/types.ts

@@ -158,6 +158,7 @@ export type PageContextType = {
   pageIndex: number;
   pageNumber: number;
   renderForms: boolean;
+  renderTextLayer: boolean;
   rotate: number;
   scale: number;
 } | null;