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

[Gumija]

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`.

[elimydlarz]

I have the same issue =/

[cpojer]

For this you'll likely need to do something like:

jest.mock('Picker', () => {
  const Picker = new String('Picker');
  Picker.Item = 'Item';
  return Picker;
});

[elimydlarz]

@cpojer This doesn't work. If you do this, as suggested:

jest.mock('Picker', () => {
  const Picker = new String('Picker');
  Picker.Item = 'Item';
  return Picker;
});

Then it says this about the Picker component:

...expected a string (for built-in components) or a class/function (for composite components) but got: object...

If you try this:

jest.mock('Picker', () => {
  const Picker = 'Picker';
  Picker.Item = 'Item';
  return Picker;
});

Then you get this about the Picker.Item component:

...expected a string (for built-in components) or a class/function (for composite components) but got: undefined...

[cpojer]

In that case I'd do this:

const Picker = class extends React.Component {
  render() {
    return 'Picker';
  }
}
Picker.Item = 'Item';
return Picker;

[elimydlarz]

Thanks! I ended up doing this:

const mockPicker = 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);
  }
};

jest.mock('Picker', () => mockPicker);

Which works =)

[RobinClowers]

When I tried this, I got:

The module factory of jest.mock() is not allowed to reference any out-of-scope variables.

[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);
    }
  }
});

[simonsmith]

Just curious, is it Jest's goal to support all the RN component out of the box?

[cpojer]

No. jest-react-native was always just an experimental feature until we merged the configuration back into react-native with 0.38. From now on, if you'd like to mock RN components, please send a diff for that directly to react-native. This decouples our dependency on RN and makes this solely an RN concern :)

[WilliamIPark]

If you're getting this error after having tried some of the solutions here:
TypeError: Cannot read property 'any' of undefined

It's because proptypes is no longer bundled with React. Just remove the
static propTypes = { children: React.PropTypes.any };
line.

[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);
      }
    };
  });

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.