How to setup worker in unit test in Create-React-App?

[ed-sparkes]

What are you trying to achieve? Please describe.

Run a test that loads a pdf from local file in a CRA app.

Describe solutions you've tried

I have tried putting the following at the top of my unit test file

import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;

but i get the following error

setting up fake worker failed: "Cannot find module '//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.worker.min.js' from '../../node_modules/pdfjs-dist/build/pdf.js'".

Environment

"react-scripts": "^4.0.1",
"react-pdf": "^5.1.0",
"react": "^17.0.1",

[wojtekmaj]

You won't be able to run external worker in unit tests.

For unit tests, I'd suggest using react-pdf/dist/esm/entry.jest Jest-specific entry.

You could use moduleNameMapper Jest config if you want to test a component that imports react-pdf, which would need to be replaced with Jest-specific entry to make it work, or react-pdf/dist/esm/entry.jest directly if you just want to use React-PDF in your unit test.

[MaStr11]

The moduleMapper entry that worked for me looks like this:

package.json

{
  "jest": {
    "moduleNameMapper": {
      "^react-pdf$": "react-pdf/dist/umd/entry.jest"
    }
  }
}

Thanks @wojtekmaj

[StephanBijzitter]

Well the above did indeed work, to some extend at least, for me as well. But now I'm getting this issue:

    Worker was terminated
      at ensureNotTerminated (node_modules/pdfjs-dist/build/webpack:/pdfjs-dist/build/pdf.worker/src/core/worker.js:169:15)
      at onFailure (node_modules/pdfjs-dist/build/webpack:/pdfjs-dist/build/pdf.worker/src/core/worker.js:343:9)

[rafacarrenho]

I got this issue after @MaStr11 soluction

(node:73226) UnhandledPromiseRejectionWarning: Error: Worker was terminated
(Use `node --trace-warnings ...` to show where the warning was created)
(node:73226) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:73226) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[github-actions]

This issue was closed because it has been stalled for 14 days with no activity.

[maksimf]

  "jest": {
    "moduleNameMapper": {
      "^react-pdf$": "react-pdf/dist/umd/entry.jest"
    }
  }

This solution has worked for me as well, the only thing I had to change though is this:

  "jest": {
    "moduleNameMapper": {
      "^react-pdf": "react-pdf/dist/umd/entry.jest"
    }
  },

I.e. removed $ cause I have:

import { Document, Page } from "react-pdf/dist/esm/entry.webpack";`)

[VigneshSonaiya]

Hi @wojtekmaj , I'm still getting the same issue eventhough I set the module mapper in Jest config. Please advise.

package.json

{
"dependencies": {
    "@emisgroup/ui-kit-react": "^3.0.1",
    "jest-html-reporter": "^3.6.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-pdf": "5.7.2",
    "rxjs": "^7.5.6",
    "styled-components": "^5.3.5",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/eslint-parser": "^7.15.0",
    "@babel/plugin-transform-runtime": "^7.18.6",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "@babel/preset-typescript": "^7.15.0",
    "@babel/runtime": "^7.15.3",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.1.5",
    "@testing-library/user-event": "^7.1.2",
    "@types/babel__core": "^7.1.19",
    "@types/jest": "^27.5.2",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.19",
    "@types/react-dom": "^17.0.9",
    "@types/react-pdf": "5.7.2",
    "@types/simple-react-lightbox": "^3.6.1",
    "@types/styled-components": "^5.1.2",
    "generate-changelog": "^1.8.0",
    "jest": "^27.5.1",
    "react-scripts": "5.0.1",
    "tiff.js": "^1.0.0",
    "ts-jest": "^27.1.5",
    "typescript": "^4.7.4"
  }
}

Jest.config.js

const {defaults} = require('jest-config');

module.exports = {
    moduleFileExtensions: [...defaults.moduleFileExtensions, "ts", "tsx", "js", "jsx"],
    moduleNameMapper: {
        ".+\\.(css|styl|less|sass|scss)$": "identity-obj-proxy",
        ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
        "^react-pdf$": "react-pdf/dist/umd/entry.jest"
    },
    transform: {
        "^.+\\.(ts|tsx)?$": "ts-jest",
        "^.+\\.scss$": "./config/jest/cssTransform.js",
    },
    testEnvironment: 'jsdom',
    preset: "ts-jest",
    transformIgnorePatterns: ["/node_modules/"],
    reporters: [
      "default",
      ["./node_modules/jest-html-reporter", {
        "pageTitle": "Document Viewer package",
        "outputPath": "build/reports/jest/test_report.html"
      }]
    ],
    collectCoverage: true,
    coverageDirectory: "build/reports/coverage",
    coverageReporters: ["json", "html", "cobertura", "lcov"],
    coverageThreshold: {
      global: {
        branches: 80,
        functions: 80,
        lines: 80,
        statements: 80
      }
    },
    testMatch: [
      "**/**/*test.ts?(x)"
    ],
}
```;`

[hilmanski]

the solution above also not work when I use NextJS.
I guess for now, I'll just use e2e Cypress testing

[catmans1]

My solution is change the code a bit
Remove .jest, There is no error Worker was terminated

    "moduleNameMapper": {
      "^react-pdf": "react-pdf/dist/umd/entry"
    }
  },```