React-pdf: Failing test using jest on import { PDFDownloadLink }

Created on 10 Sep 2019 · 5Comments · Source: diegomura/react-pdf

Describe the bug
I am using PDFDownloadLink to create a PDF and download it when I click on a button. Everything is working fine, except when I run my tests using jest. I haven't implemented any test on the PDF component itself, jest is blocked on the following import:

ReferenceError: _a is not defined
import { PDFDownloadLink } from '@react-pdf/renderer'

Thank you in advance for your time!

Expected behavior
Pass the tests while importing PDFDownloadLink.

Screenshots
Screenshot 2019-09-10 at 10 40 03

Desktop:

OS: MacOS
Browser: chrome
React-pdf version: 1.6.4

Source

laetitiaZammit

👍6

Most helpful comment

So this doesn't necessarily _fix_ this issue, but if your Jest tests are failing after adding the PDFDownloadLink to your component, you can mock it out to keep everything working.
If you strictly want your tests to keep working, just do something like this:

jest.mock('@react-pdf/renderer', () => ({
  PDFDownloadLink: jest.fn(() => null),
}));

and if you care about testing the children that are being passed into the PDFDownloadLink, you can still render them with something like this:

jest.mock('@react-pdf/renderer', () => ({
  PDFDownloadLink: function PDFDownloadLink({ children }) {
    return <>{children({})}</>;
  },
}));

Just mock everything until it passes 😅

Sustenance on 15 May 2020

🎉3 😄3

All 5 comments

I also have a similar issue with testing this using Jest/React-Testing-Library. Below is the Error I receive.

console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
    Error: Uncaught [Error: PDFDownloadLink is a web specific API. Or you're either using this component on Node, or your bundler is not loading react-pdf from the appropiate web build.]

aaron-origin on 10 Oct 2019

😕6

@aaron-origin same issue, did you find a solution?

liron-navon on 3 Nov 2019

Has anyone had time to look into this? I tried looking into this a little, but I'm not particularly familiar with the bundler that's being used, rollup. From my perspective it looks like we'd need the browserProdConfig to be loaded for Jest (at least when using jsdom) tests instead of the serverProdConfig.

Sustenance on 14 May 2020

jest.mock('@react-pdf/renderer', () => ({
  PDFDownloadLink: jest.fn(() => null),
}));

and if you care about testing the children that are being passed into the PDFDownloadLink, you can still render them with something like this:

jest.mock('@react-pdf/renderer', () => ({
  PDFDownloadLink: function PDFDownloadLink({ children }) {
    return <>{children({})}</>;
  },
}));

Just mock everything until it passes 😅

Sustenance on 15 May 2020

🎉3 😄3

@Sustenance

I'm getting the same error as @aaron-origin

console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
    Error: Uncaught [Error: PDFDownloadLink is a web specific API. Or you're either using this component on Node, or your bundler is not loading react-pdf from the appropiate web build.]

and it's making my tests fail as it doesn't render the component that contains it

using the jest.mock solution you suggested didn't work - any possible idea why?