Javascript 为 MockComponent 制作 JSX 语法并使用 typescript 输入

如果你看React without JSX，你会发现受XML启发的语法(<MockComponent />)只是React.createElement('MockComponent')的缩写.

现在，如果将mockComponent重命名为MockComponent，并try 使用尖括号语法，那么first的问题是函数接收两个参数.React组件可以是采用一个构造函数参数(props)的类组件，也可以是采用一个参数(同样，props)的函数组件.问题在于，当函数需要返回rendered React元素时，它会返回一个React函数组件.

解决这个问题的一种方法是将mockComponent转化为React功能组件，并制作module和propOverride个FCprops .

// https://learn.reactnativeschool.com/courses/781007/lectures/14173979
export function MockComponent(props) {
  const { moduleName, propOverrideFn, ...customComponentProps } = props;

  const RealComponent = jest.requireActual(moduleName) as React.ComponentType<any>
  const CustomizedComponent = (props: Record<string, any>) => {
    return React.createElement(
      'CustomizedComponent',
      {
        ...props,
        ...propOverrideFn(props),
      },
      props.children
    )
  }
  CustomizedComponent.propTypes = RealComponent.propTypes

  return <CustomizedComponent {...customComponentProps} />
}

这些差异很微妙，但很重要.在这里，我修改了MockComponent，以接受一个与React.createElement()兼容的单数prop参数.这就引出了一个问题:如何区分CustomizedComponent的props 和mockComponent()的参数.在这里，我使用JavaScript解构和扩展操作符将module和propOverride与CustomizedComponent的props 分开.

最后，我使用JSX spread syntax将用于CustomizedComponent的任意props 传递到CustomizedComponent，并使用尖括号进行渲染(而不是返回函数).

作为练习，我将为MockComponent的props 提供适当的TypeScript定义.您可以简单地将其定义为记录的并集<；任何字符串>；module和propOverride.然而，你可以使用一个模板定义，所以MockComponent<Toolbar>是module和propOverride以及Toolbar的props 的结合.

哦，我差点忘了.你的jest电话看起来像

jest.mock('react-native/Libraries/Components/Touchable/TouchableOpacity', () => {
    (props) => {
        return <MockComponent 
            module='TouchableOpacity' 
            onPress={props => props.disabled ? () => {} : props.onPress}
            {...props}
        />
   }
})