Unit testing with viewerless UI and jest

Technical Support WebViewer
, ,
1

I need to write unit tests for our pdf annotating software that we have built with DocumentViewer.

There is no documentation for this process.

In the main component for the document viewer, we set Core.setWorkerPath() from index.html, then set the document viewer with this.documentViewer = await new Core.DocumentViewer().

However, when trying to test, I cannot even past the test initialization process because errors are thrown, saying things such as documentViewer.getAnnotationManager is not a function, even when I set it in the describe function. This has been a long and tedious process losing days trying to figure it out, so I hope some progress can be made by posting here. Thank you.

1 Like
2

Hi there,

Thanks for reaching out to WebViewer forums,

Here is a similar post to get you started about testing

If you plan to test the UI, we use Storybook and Playwright to test our UI. You can see our implementation and test them here in our public repo: GitHub - PDFTron/webviewer-ui: WebViewer UI built in React

Best regards,
Kevin Kim

1 Like
3

Hello,

That is not helpful because they are testing with instance and we are not using it that way. I am looking for ways to figure this out without using instance. I’m sure there are others who need to test this as well. Please help provide helpful solutions.

I have managed to get documentViewer to not throw an error, but now it is complaining that annotationManager is undefined. In our jest settings file I have included which seems to work. Setting annotation manager here or in the test file does not yield different results.
global.window.Core = { setWorkerPath: jest.fn(), DocumentViewer: jest.fn(), };

1 Like
4

Hi there,

Thank you for your response,

You’ll still need to run Core.setWorkerPath('path to worker resources'); to a valid path for our SDK to retrieve resources
Run without viewer

And you can call setWorkerPath:
Core.setWorkerPath('WebViewer/lib/core');

Is this how you are also setting them in your tests?

Best regards,
Kevin Kim

1 Like
5

Yes,

Core.setWorkerPath("/webviewer"); let documentViewer = await new Core.DocumentViewer();

This works fine and no further errors are thrown about core or document viewer,
the only error being thrown now is about the annotation manager being undefined. If i do
annotationManager = documentViewer.getAnnotationManager();
or even

const { documentViewer, annotationManager } = global.window.Core;

I still only receive errors regarding annotation manager, it seems as though core is correct

1 Like
6

Hi there,

Thank you for your response,

Could you please share a minimal runnable sample project and the reproducible steps to troubleshoot the issue?

Best regards,
Kevin Kim

1 Like