Unit testing 如何在React Native中模拟Picker和Picker.Item并使用笑话？

我正在尝试快照测试这段代码：

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

我想我应该根据我的想法来嘲笑它

我试着简单地加上：

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

但它仍然会抛出一个错误，因为Picker.Item仍然没有被模拟

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

我尝试过的其他变体无效：

jest.mock('Picker', () => {return {Item: 'Item'}});
----------------------------------------------------
class Picker{
  Item = 'PickerItem'
}
jest.mock('Picker', () => {
  return Picker;
});

也创建了一个，下面是一个有效的答案：

jest.mock('Picker', () => {
  const Picker = class 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);
    }
  }
  return Picker;
})

---

对于Expo v39，我可以通过在测试/设置文件中添加以下模拟来测试

@react native community/picker

：

jest.mock('@react-native-community/picker', () => {
  const React = require('React')
  const RealComponent = jest.requireActual('@react-native-community/picker')

  class Picker extends React.Component {
    static Item = (props: { children: never }) => {
      return React.createElement('Item', props, props.children)
    }

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

  Picker.propTypes = RealComponent.propTypes
  return {
    Picker
  }
})

请注意，

@react native community/picker

现在是

---

是否有办法将event.type传递到fireEvent onChange方法中？这是有效的答案！

jest.mock('Picker', () => {
  const Picker = class 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);
    }
  }
  return Picker;
})

jest.mock('@react-native-community/picker', () => {
  const React = require('React')
  const RealComponent = jest.requireActual('@react-native-community/picker')

  class Picker extends React.Component {
    static Item = (props: { children: never }) => {
      return React.createElement('Item', props, props.children)
    }

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

  Picker.propTypes = RealComponent.propTypes
  return {
    Picker
  }
})