Snapshot test fails when using React Native Picker and Picker.Item

I have seen similar problems with other components, but couldn’t find the right mock implementation for Picker.

My error:

TypeError: Cannot read property '_tag' of undefined

My component:

import React, { Component } from 'react';
import {
  Picker,
} from 'react-native';


export default class TestComponent extends Component {

  render() {
    return (
      <Picker
        selectedValue={this.props.asset.type}
        onValueChange={this.props.onTypeChange}>
        <Picker.Item label="Type of asset" value="default" />
        <Picker.Item label="Car" value="car" />
        <Picker.Item label="Boat" value="boat" />
        <Picker.Item label="Ship" value="ship" />
      </Picker>
    );
  }
}

My test:

import 'react-native';
import React from 'react';
import TestComponent from '../testExample/TestComponent';
import renderer from 'react-test-renderer';

describe('TestComponent', () => {
  const asset = {
    type: 'car',
  }
  it('renders correctly', () => {
    const comp = renderer.create(
      <TestComponent 
        asset={asset} />
    )
    const tree = comp.toJSON();
    expect(tree).toMatchSnapshot();
  });
})

Tried mocking it some way but didn’t help. I could make it work with Picker.Item-s commented out.

jest.mock('Picker', () => 'Picker'); //  Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `TestComponent`.

[LuisUrrutia]

@WilliamIPark is right, you should use this in the newest versions:

jest
  .mock('Picker', () => {
    // eslint-disable-next-line import/no-unresolved
    const React = require('React');
    const PropTypes = require('prop-types');
    return class MockPicker extends React.Component {
      static Item = props => React.createElement('Item', props, props.children);
      static propTypes = { children: PropTypes.any };
      static defaultProps = { children: '' };

      render() {
        return React.createElement('Picker', this.props, this.props.children);
      }
    };
  });

[cpojer]

you should instead do this, actually:

jest.mock('Picker', () => {
  const React = require('React');
  return class MockPicker extends Component {
    static Item = props => React.createElement('Item', props, props.children);
    static propTypes = { children: React.PropTypes.any };

    render() {
      return React.createElement('Picker', this.props, this.props.children);
    }
  }
});