Anyone got working Jest tests?

[pzi]

G'day,

I have spent almost all day today trying to figure out how I can add tests to my project that just asserts if the right callbacks are fired and the right error messages are shown on a page.

Set up:

• node 16.19.0
• next v12.x (latest v12)
• react 17.x (latest 17)

It's working fine in the browser after I deleted the options prop from the implementation (I am upgrading my implementation from [email protected] to 7.x) because it caused errors (similar to #1529).

Anyway, here's my basic component:

import * as React from 'react';

import {getPublicUrl} from '@sitecore-jss/sitecore-jss-nextjs';
import type {DocumentProps} from 'react-pdf';
import {Document, pdfjs} from 'react-pdf';

if (process.env.NODE_ENV !== 'test') {
  // Point the PDF.js worker path to our local copy.
  // See https://github.com/wojtekmaj/react-pdf/blob/0de76f73a0817ae042f40ff72bb96e2dc7070933/README.md#configure-pdfjs-worker
  pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdf.worker.min.js', getPublicUrl()).toString();
}

const EmptyRender = () => <React.Fragment />;

export type PdfLoaderProps = Pick<
  DocumentProps,
  'file' | 'onPassword' | 'onSourceError' | 'onLoadError' | 'onLoadSuccess'
>;

const PdfLoader = (props: PdfLoaderProps) => <Document renderMode="none" loading={EmptyRender} {...props} />;

export default PdfLoader;

In other words, it's not meant to render anything itself, we are purely using react-pdf to check if a given PDF (selected via react-dropzone) can be read and whether or not it's password protected.

// DIfferent component that consumes PdfLoader above


  const handlePDFPasswordError = () =>
    onReject?.({
      errors: [{code: 'protected-pdf', message: errorLabels.uploadProtectedFileLabel}],
      file,
    });

  const handlePDFLoadError = () =>
    onReject?.({
      errors: [{code: 'source-error', message: errorLabels.uploadFailedLabel}],
      file,
    });

Now we would like to have tests that give the PdfLoader a file and check if the right error messages and data has been rendered to the page. That's all. My current implementation with react-pdf@v5 is working and the tests pass. After the upgrade they fail for various reasons. I looked at the tests in this repo (written using vitest, not jest) and can't see what I am doing differently in my set up.

If someone has a working Jest version of the tests that would be super appreciated :)

Happy to answer questions or add more code samples or something to repro.

Thanks

[pzi]

Current tests I would like to get working with v7:

describe('ProcessingFile', () => {
  test('unprotected pdf', async () => {
    const workingPDFFile = loadPDF('./__mocks__/test-pdf.pdf');

    const {func: onLoadSuccess, promise: onLoadSuccessPromise} = makeAsyncCallback(
      Object.assign(workingPDFFile.file, {
        dataUrl: URL.createObjectURL(workingPDFFile.file),
      }),
    );

    render(<ProcessingFile file={workingPDFFile.file} onAccept={onLoadSuccess} process={true} />);

    expect.hasAssertions();
    expect.assertions(2);

    expect(await screen.findByTestId('selectedFileName')).toHaveTextContent('test-pdf.pdf');

    await expect(onLoadSuccessPromise).resolves.toMatchObject({dataUrl: 'mock-url'});
  });

  test('protected pdf', async () => {
    const protectedPDFFile = loadPDF('./__mocks__/password-protected-pdf.pdf');

    const {func: onLoadSuccess} = makeAsyncCallback();
    const {func: onReject, promise: onRejectPromise} = makeAsyncCallback();

    render(<ProcessingFile file={protectedPDFFile.file} onAccept={onLoadSuccess} onReject={onReject} process={true} />);

    expect.hasAssertions();
    expect.assertions(1);

    await expect(onRejectPromise).resolves.toMatchObject({
      errors: [{code: 'protected-pdf', message: 'Please upload a file without password protection.'}],
      file: protectedPDFFile.file,
    });
  });

  test('corrupt pdf', async () => {
    const corruptedFile = new File([new ArrayBuffer(42)], 'derp', {type: 'application/pdf'});
    const originalConsoleLog = console.log;

    const {func: onLoadSuccess} = makeAsyncCallback();
    const {func: onReject, promise: onRejectPromise} = makeAsyncCallback();

    // Temporarily override console.log as PDF.js warns about the corrupt PDF as it tries to fix it.
    console.log = jest.fn();

    render(<ProcessingFile file={corruptedFile} onAccept={onLoadSuccess} onReject={onReject} process={true} />);

    expect.hasAssertions();
    expect.assertions(4);

    expect(await screen.findByText(/Failed to load PDF file./i)).toBeVisible();

    await expect(onRejectPromise).resolves.toMatchObject({
      errors: [{code: 'source-error', message: 'Sorry, this upload failed. Please try again.'}],
      file: corruptedFile,
    });

    // Ensure we don't get other logs apart from the one we are hiding...
    expect(console.log).toHaveBeenCalledTimes(1);
    expect(console.log).toHaveBeenCalledWith('Warning: Indexing all PDF objects');

    // Restore logging
    console.log = originalConsoleLog;
  });
});

[wojtekmaj]

Sooo... What are the errors?

[pzi]

Apologies @wojtekmaj, I got distracted and forgot to add the error details.

It starts with:

    Warning: Error: Setting up fake worker failed: "Cannot find module 'pdf.worker.js' from 'node_modules/react-pdf/node_modules/pdfjs-dist/build/pdf.js'".

Then I saw you are importing "pdf.worker.entry" file into your tests. Added my own:

(typeof window !== 'undefined'
  ? window
  : {}
).pdfjsWorker = require('react-pdf/node_modules/pdfjs-dist/build/pdf.worker');

which then changes it to the following warning:

  console.warn
    Warning: ReferenceError: structuredClone is not defined

structuredClone is not available in the jsdom env (jsdom/jsdom#3363), so trying to "polyfill" that by using

if (!global.structuredClone) {
  global.structuredClone = (val: unknown) => JSON.parse(JSON.stringify(val));
}

which results in

  console.warn
    Warning: UnknownErrorException: The browser/environment lacks native support for critical functionality used by the PDF.js library (e.g. `Path2D` and/or `ReadableStream`); please use a `legacy`-build instead.

Changing this to use the legacy build of PDF.js (by changing the require to pdfjs-dist/legacy/build/pdf.worker) then results in

    TypeError: polyfillPath2D is not a function

      16 |   ? window
      17 |   : {}
    > 18 | ).pdfjsWorker = require('react-pdf/node_modules/pdfjs-dist/legacy/build/pdf.worker');
         |                 ^
      19 |

Then, when I install path2d polyfill, it complains about missing CanvasRenderingContext2D. Then I install canvas and use that to define global.CanvasRenderingContext2D and then something else is not working in that environment (I undid all my experiments as I gave up as I didn't want to go to endless "hacky ways" to make it work in Jest. Given it works in the browser, our automation e2e test suite should be able to use it and verify.

I can try and reproduce more again tomorrow, hopefully the above is a start to give you some indication.

[pzi]

If I install core-js and use that to use structuredCloneI get this warning:

  console.warn
    Warning: DataCloneError: Transferring of ArrayBuffer cannot be properly polyfilled in this engine

[pzi]

I should also add that all these errors stay when using Node 18.16.1 (as opposed to v16.19.0 as stated in the original post).

[pzi]

Another possible key differentiator was that my project is using React 17, not 18.

[pzi]

I guess one of the fundamental questions is why do the tests work in Vitest/this repository and not in Jest/my repo? What am I missing in my setup that's been done for this repo? :)

[pzi]

@wojtekmaj I notice the Document.spec doesn't contain a test for the onPassword callback? I was trying to add it and submit a PR but I cannot, for the life of me, figure out how to assert that the right callback has been called. Do you have any pointers, or was there a specific reason why that test is missing? :)

The best I could come up with was this:

it('loads a password protected file and calls onPassword callbacks via File properly', async () => {
  const passwordCallback = vi.fn();
  const updatePassword = vi.fn((callback) => {
    callback('password protected');
  });
  const { func: onSourceSuccess, promise: onSourceSuccessPromise } = makeAsyncCallback(OK);
  const { func: onLoadSuccess } = makeAsyncCallback();
  const { func: onPassword, promise: onPasswordPromise } = makeAsyncCallback(updatePassword);

  render(
    <Document
      file={passwordProtectedPdfFile.file}
      onPassword={onPassword}
      onLoadSuccess={onLoadSuccess}
      onSourceSuccess={onSourceSuccess}
    />,
  );

  expect.assertions(5);

  await expect(onSourceSuccessPromise).resolves.toBe(OK);
  await expect(onPasswordPromise).resolves.not.toMatchObject([desiredLoadedPdf3]);
  await expect(onPasswordPromise).resolves.toBe(updatePassword);

  const prompt = await onPasswordPromise;
  prompt(passwordCallback);

  expect(passwordCallback).toHaveBeenCalled();
  expect(passwordCallback).toHaveBeenCalledWith('password protected');
});

Unsure if that is of any value, happy to take your feedback.

[stoatbringer]

I've been through similar problems and got stuck at the same point (arraybuffer cannot be polyfilled) and I think the problem lies in pdfjs-dist, not react-pdf itself.
See mozilla/pdf.js#16367
which was closed as a duplicate of mozilla/pdf.js#16255
which was supposedly fixed by this pull request in pdfjs v3.6.172
mozilla/pdf.js#16279

However, I'm using react-pdf 7.1.3 with pdfjs-dist v3.6.172 and still getting the same error.

One of the suggested solutions ( mozilla/pdf.js#16367 (comment) ) is to downgrade to pdfjs v3.4.120 which is not very helpful as react-pdf currently depends on v3.6.172.

@wojtekmaj Are there plans to upgrade to use the latest pdfjs-dist, or is there a straightforward way of making react-pdf use a newer version?

[pzi]

Interesting, thanks for your response @stoatbringer, appreciate it. Hopefully newer versions help with this then.

[ruixiaozi]

非常感谢，我用pdfjs的时候遇到了这个问题，3.6的版本不行，降级就解决了，谢谢

[codyzu]

I'm just throwing my 2 cents in here... after reading this thread and looking at the source, I was eventually able to get some tests working but they weren't very stable. I eventually decided that it just smelled bad and wasn't appropriate for a unit test with react testing library. I switched all of the pdf related tests to e2e tests with playwright and everything just worked without any complicated mocking.

[pzi]

That makes sense... my predicament is that I just want to test the callbacks (actually even just the 1) of the Document 😬 I am not even intending to use/test the PDF display functionality with RTL.

[wojtekmaj]

Did you look into react-pdf's own tests? Not much was needed to get it going.

In #1360, a PR in which we migrated from Jest to Vitest, you can also see the old Jest based implementation.