Pdf not renderering correctly in Jest snapshots

[jamesmcn1]

What react-native version are you using? 0.57.8 What react-native-pdf version are you using? 5.0.12 What platform does your issue occur on? (android/ios/both) N/A

Trying to test via Jest to ensure Pdf component renders on page, but React.createElement is failing resulting in it not being rendered by shallow.

Component:

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Pdf from 'react-native-pdf';
import { View, StyleSheet, Dimensions } from 'react-native';

import VideoPlayer from '../../../components/VideoPlayer';
import Spinner from '../../../components/Spinner';

export class ResourcesItemScreen extends PureComponent {
  static propTypes = {
    url: PropTypes.string,
    video: PropTypes.bool,
    navigation: PropTypes.obj,
  };

  static defaultProps = {};

  render() {
    const { url, video } = this.props.navigation.state.params;
    const base64 = this.props.navigation.state.params.string;
    const string = base64 ? `data:application/pdf;base64,${base64}` : null;
    if (video && url) {
      return (
        <VideoPlayer
          videoUri={url}
          fullScreen
        />
      );
    }
    if (!url && !string) { return <View />; }
    return (
      <View testID="ResourcesItemScreen" style={styles.container}>
        <Pdf
          source={{ uri: url || string, cache: true }}
          style={styles.pdf}
          activityIndicator={<Spinner />}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  pdf: {
    flex: 1,
    width: Dimensions.get('window').width,
  },
});

export default ResourcesItemScreen;

Test:

  const wrapper = shallow(<ResourcesItemScreen {...testProps} />);

   it('renders successfully and prioritses url over string', () => {
     const rendered = wrapper.dive();
     console.log(rendered.debug());
     expect(rendered).toMatchSnapshot();
     expect(rendered.find('Pdf')).toHaveProperty('length', 1);
     expect(rendered.find('Pdf').source).toBe('url');
   });

Output of console.log(rendered.debug()):

    <View testID="ResourcesItemScreen" style={{...}}>
      <[object Object] source={{...}} style={{...}} activityIndicator={{...}} /> // Pdf not being shown here
    </View>

Console warning: Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Looks like it's an issue with the way Pdf is being imported in component. When I try: import { Pdf } from 'react-native-pdf'; I get Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Anyone able to assist? Thanks :)

[lucianomlima]

@jamesmcn1 you resolve this?!

[jamesmcn1]

Hi @lucianomlima - not yet but we've just upgraded to RN 0.62.2 so maybe this will fix this. Test has been commented out for now.

[KawaljeetSBagga]

I get this error when I run my simple render component test Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

This is due to the {source} object. @jamesmcn1 any update?

[jamesmcn1]

Nope, haven't managed to fix this - the test still remains commented out. Output of console.log(rendered.debug()) is still:

    <View testID="ResourcesItemScreen" style={{...}}>
      <[object Object] source={{...}} style={{...}} activityIndicator={{...}} onError={[Function]} />
    </View>

[fauzzi]

RN Version : "react-native": "0.63.2"

Issue: With same issue on this. Weird the output with object. <[object Object] source={{...}} page={1} style={{...}} />

console error: Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

I look forward to hearing on this. Thanks!

[vikas5914]

From the https://reactnative.dev/docs/testing-overview ,

Component tests are only JavaScript tests running in Node.js environment. They do not take into account any iOS, Android, or other platform code which is backing the React Native components. It follows that they cannot give you a 100% confidence that everything works for the user. If there is a bug in the iOS or Android code, they will not find it.

[Murphyst]

Any update on this?

[nhasoenhasan]

solved this issue with this

jest.mock('react-native-pdf'); jest.mock('react-native-blob-util', () => { return { Share: () => ({ DocumentDir: jest.fn().mockImplementation(() => Promise.resolve()), }), }; });