WebViewer Jest Tests

Technical Support
1

Which product are you using?
PDF.js Express Viewer

PDF.js Express Version
8.7.0

Detailed description of issue
I am looking to create an instance of the webviewer for some Jest Testing, but it seems to hang when trying to populate. However when using await when creating the WebViewer the test seems to hang indefinately. Any advice or best practices around creating a WebViewer for jest tests?

    test('basic dom test', async () => {
        document.body.innerHTML = `
        <div id="test"></div>
      `;
        const div = document.getElementById('test');
        expect(document.body.innerHTML).not.toBe(null);
        expect(div).not.toBe(null);
        await WebViewer(
            {
                licenseKey: 'test',
                path: '../../public/webviewer/lib',
                extension: 'pdf',
            },
            div,
        );

        expect(WebViewer).not.toBe(null);
    });
3

Hello dale,

Here is an example setup for Jest tests:

describe('WebViewer', () => {
  let viewer;

  beforeAll(async () => {
    // Initialize WebViewer instance
    const instance = await WebViewer({
      path: '/webviewer/lib',
      initialDoc: '/files/sample.pdf',
    });

    viewer = instance.Core.documentViewer;
  });

  afterAll(async () => {
    // Destroy WebViewer instance
    await viewer.setDocument(null);
    await instance.close();
  });

  it('should load a PDF document', async () => {
    // Your test assertions here
    // load document, then here's an example assertion
    const pageCount = await viewer.getPageCount();
    expect(pageCount).toBe(4);
  });
});

Let me know if this works for you!

Best regards,
Tyler Gordon
Platform Support Team Lead
Apryse Software Inc.

4

Brilliant, this is what I was looking for. However when I try this I get

image
image836×243 16.5 KB

5

Hello dale,

Thats an interesting error, how are you importing WebViewer?
Are you calling addEventListener anywhere?

Best regards,
Tyler

6

As far as I can tell apart from using Typescript, I’m not doing anything outside of this to get the error

import WebViewer from '@pdftron/pdfjs-express';
let viewer: WebViewerInstance | null = null;
let instance: any;
beforeAll(async () => {
    // Initialize WebViewer instance
    instance = await WebViewer({
        path: '/webviewer/lib',
        initialDoc: '/files/sample.pdf',
    });

    viewer = instance.Core.documentViewer;
});

// Reset any request handlers that we may add during the tests,
// so they don't affect other tests.
afterEach(() => server.resetHandlers());
// Clean up after the tests are finished.
afterAll(() => {
});