# WebViewer Jest Tests

**URL:** <https://pdfjs.community/t/webviewer-jest-tests/2467>\
**Category:** Technical Support\
**Created:** [March 20, 2023, 4:24am UTC](https://pdfjs.community/t/webviewer-jest-tests/2467 "2023-03-20T04:24:43Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![dale](https://avatars.discourse-cdn.com/v4/letter/d/ecd19e/32.png) [@dale](https://pdfjs.community/u/dale)\
**Post date:** [March 20, 2023, 4:24am UTC](https://pdfjs.community/t/webviewer-jest-tests/2467/1 "2023-03-20T04:24:43Z")

</div>

**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?

```javascript
    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);
    });

```

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [March 20, 2023, 9:56pm UTC](https://pdfjs.community/t/webviewer-jest-tests/2467/3 "2023-03-20T21:56:27Z")

</div>

Hello dale,

Here is an example setup for Jest tests:

```javascript
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.

---

<div class="post-metadata">

**Author:** ![dale](https://avatars.discourse-cdn.com/v4/letter/d/ecd19e/32.png) [@dale](https://pdfjs.community/u/dale)\
**Post date:** [March 21, 2023, 1:46am UTC](https://pdfjs.community/t/webviewer-jest-tests/2467/4 "2023-03-21T01:46:27Z")

</div>

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

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/e/e78e615442566fdbe27e07ab21a209686828ea86.png)

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [March 21, 2023, 3:11pm UTC](https://pdfjs.community/t/webviewer-jest-tests/2467/5 "2023-03-21T15:11:42Z")

</div>

Hello dale,

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

Best regards,  
Tyler

---

<div class="post-metadata">

**Author:** ![dale](https://avatars.discourse-cdn.com/v4/letter/d/ecd19e/32.png) [@dale](https://pdfjs.community/u/dale)\
**Post date:** [March 23, 2023, 5:43am UTC](https://pdfjs.community/t/webviewer-jest-tests/2467/6 "2023-03-23T05:43:51Z")

</div>

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

```javascript
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(() => {
});

```