"TypeError: Cannot read property 'supportPDFKit' of undefined" during Jest tests

[codeofdiego]

What react-native version are you using? 0.63.3

What react-native-pdf version are you using? 6.2.1

What platform does your issue occur on? (android/ios/both) Jest

Describe your issue as precisely as possible : 1) Steps to reproduce the issue or to explain in which case you get the issue

I was able to install and properly use the Pdf component in my application. However, when I tried to run a snapshot test with a mocked pdf file I got the error TypeError: Cannot read property 'supportPDFKit' of undefined. After some research, I found that this usually happens when the library is not properly linked in iOS or Android, but they are linked and the error only happens during the jest tests. Any idea what could cause it?

2) Interesting logs

 FAIL  __tests__/PDFViewer.test.js (7.307s)
  PDFViewer
    ✕ Renders correctly with mocked PDF (106ms)

  ● PDFViewer › Renders correctly with mocked PDF

    TypeError: Cannot read property 'supportPDFKit' of undefined

      at Pdf.componentDidMount (node_modules/react-native-pdf/index.js:392:879)
      at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9432:26)
      at commitAllLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10829:11)
      at Object.invokeGuardedCallbackImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2302:14)
      at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2480:35)
      at commitRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11041:11)
      at node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12492:9
      at Object.unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:255:16)
      at completeRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12491:17)
      at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12420:13)

  console.error node_modules/react-native/Libraries/LogBox/LogBox.js:33
    The above error occurred in the <Pdf> component:
        in Pdf (at PDFViewer.js:22)
        in View (created by View)
        in View (at PDFViewer.js:21)
        in PDFViewer (at PDFViewer.test.js:22)
        in Provider (at PDFViewer.test.js:21)

    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        13.056s

Show us the code you are using?

• Component

import React from 'react'
import { View, StyleSheet } from 'react-native'
import Pdf from 'react-native-pdf'

const source = require('assets/test.pdf')

const styles = StyleSheet.create({
  ...
})

const PDFViewer = () => {
  return (
    <View style={styles.container}>
      <Pdf
        source={source}
        style={styles.pdf}
        onError={(error)=>{
          console.log(error);
        }}
      />
    </View>
  )
}

export default PDFViewer

• Mocked PDF

jest.mock('assets/test.pdf', () => {
  return { uri:'http://samples.leanpub.com/thereactnativebook-sample.pdf', cache: true }
})

• Test

import React from 'react'
import { Provider } from 'react-redux'

// Test
import renderer from 'react-test-renderer'

// Store
import mockedState from 'test/store/data'
import { getMockedStore } from 'test/store/utils/storeTest'

// Components
import PDFViewer from '../PDFViewer'

describe('PDFViewer', () => {
  const state = { ...mockedState }
  const store = getMockedStore(state)

  it('Renders correctly with mocked PDF', () => {
    const tree = renderer
      .create(
        <Provider store={store}>
          <PDFViewer />
        </Provider>
      )
      .toJSON()
    expect(tree).toMatchSnapshot()
  })
})

[kkmate]

Hi,

Did you find a solution?

[damonbauer]

@codeofdiego @kkmate - I got around this by doing this in my test file:

import React from 'react';
// other imports...

jest.mock('react-native', () => {
  const REACT_NATIVE = jest.requireActual('react-native');

  REACT_NATIVE.NativeModules.PdfViewManager = {
    supportPDFKit: jest.fn(() => true),
  };
  REACT_NATIVE.NativeModules.PdfManager = {
    loadFile: jest.fn().mockResolvedValue([]),
  };

  return REACT_NATIVE;
});

describe('Test', () => {
  ...
});

Still working through some other issues, but it's at least a start...

(this is taken from here: https://github.com/facebook/react-native/issues/28839#issuecomment-625453688)