Jest Test Cases Not Working After Updating react-pdf from 8.0.2 to 9.0.0

[Shruti3004]

Before you start - checklist

• [X] I followed instructions in documentation written for my React-PDF version
• [X] I have checked if this bug is not already reported
• [X] I have checked if an issue is not listed in Known issues
• [X] If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

After updating react-pdf from version 8.0.2 to 9.0.0, Jest test cases are failing to run properly. The tests were previously passing with react-pdf version 8.0.2.

Steps to reproduce

1. Update react-pdf from version 8.0.2 to 9.0.0 in the project dependencies.
2. Attempt to run Jest test cases.
3. Observe that test cases fail to execute or produce unexpected errors.

Expected behavior

Jest test cases should run successfully without any errors, similar to when using react-pdf version 8.0.2.

import { Document, pdfjs, Page } from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;

Additional information

Environment

• OS: MacOS
• Browser: chrome
• React-pdf version: v9.0.0

[cyntler]

Same here... I even migrated to Vitest but now I can see:

[wojtekmaj]

Hi folks, yes, some errors after migration to v9 are kinda expected. v9.0.0 comes with a drastic bump in system requirements, that's why I made sure to release vulnerability mitigation for v8 and v7 before releasing v9.

@Shruti3004: Jest is particularly bad when working with any ESM module, and PDF.js, a core dependency of ours, is one of them. I wholeheartedly recommend migrating to Vitest, but if you really, really, really cannot, you may give this a shot: https://jestjs.io/docs/ecmascript-modules

To get past @cyntler's issue on Node versions lower than 22.0.0, you should add Promise.withResolvers polyfill: https://github.com/wojtekmaj/react-pdf/commit/2ba89d8cb968af6e522e688329cbf2e412b80462

Please note that this may or may not be enough to get the tests green, depending on how deep your unit testing goes. For obvious reasons, our own unit tests go as deep as to actual canvas rendering, and for this reason, we also were forced to add the following workaround: https://github.com/wojtekmaj/react-pdf/commit/0a7c4fef82b9f9fd45da00c7d7bdffb98bf0f6e4

[heath-freenome]

@wojtekmaj You've hinted at using the transformIgnorePatterns. Do you know what they might be? I've tried the following so far with no luck. NOTE: Switching to vitest is currently not an option:

"transformIgnorePatterns": [
      "/node_modules/(?!(react-pdf|pdfjs-dist)/)"
    ]

[Scc33]

Same here @heath-freenome. The error SyntaxError: Unexpected token 'export' is coming from /node_modules/pdfjs-dist/build/pdf.mjs.

"transformIgnorePatterns": [
      "/node_modules/(?!(pdfjs-dist)/)"
 ]

Doesn't work either.

[Scc33]

Okay problem solved for me.

1. To the jest.config.cjs I added transformIgnorePatterns: ["<rootDir>/node_modules/(?!pdfjs-dist)"] and "\\.mjs?$": "babel-jest" to the transform. Initially, I was only transforming .jsx files so the pdfjs file wasn't being picked up.
2. The steps in https://github.com/wojtekmaj/react-pdf/commit/2ba89d8cb968af6e522e688329cbf2e412b80462. Installed core-js and then added import 'core-js/proposals/promise-with-resolvers'; to my /src/setupTests.js file.

jest.config:

module.exports = {
  verbose: true,
  transform: { "^.+\\.jsx?$": "babel-jest", "\\.mjs?$": "babel-jest" },
  moduleNameMapper: {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css|pdf)$": "jest-transform-stub"
  },
  testEnvironment: "jsdom",
  setupFiles: ["<rootDir>/src/testEnv.js"],
  setupFilesAfterEnv: ["<rootDir>/src/setupTests.js"],
  testPathIgnorePatterns: ["<rootDir>/tests/", "<rootDir>/node_modules/"],
  transformIgnorePatterns: ["<rootDir>/node_modules/(?!pdfjs-dist)"],
};

[cyntler]

@wojtekmaj I also fixed the problem with Vitest and v9.0.0. The changes from https://github.com/wojtekmaj/react-pdf/commit/2ba89d8cb968af6e522e688329cbf2e412b80462 helped. Thanks, countryman! ;)

[roseKQ]

If you are stuck with an older legacy code base (i.e. React 16, node v18.9.0) and you can't update to Vitest but you just want to get your tests running & you had to address the security vulnerability in pdf.js in react-pdf v8 so are forced to update to react-pdf to v9.0.0. ...

This worked for me. I mocked out react-pdf with an empty file in my mock folder and added this below to my jest.config.cjs

moduleNameMapper: { '^react-pdf$': '<rootDir>/__mocks__/react-pdf.js',

It's not pretty but if you're in the same predicament as me and you can't get anything to work in transformIgnorePatterns to fix your breaking tests then give this a go.