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

Question

想知道是否有人对如何破解这个有一些好的建议。得到了这个测试助手工具，我添加了一些类型:

import { jest } from '@jest/globals'
import React from 'react'

// https://learn.reactnativeschool.com/courses/781007/lectures/14173979
export function mockComponent(moduleName: string, propOverrideFn = (props: Record<string, any>) => ({})) {
  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
}

所以目前我可以这样调用它

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

但我希望能够称之为更像

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

或者

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

Answer 1

如果你看React without JSX ，您会看到受 XML 启发的语法( <MockComponent /> )只是 React.createElement('MockComponent') 的缩写。 .
现在，如果你重命名 mockComponent至MockComponent并尝试使用尖括号语法 第一个 问题是您的函数接收两个参数。 React 组件要么是带有一个构造函数参数(props)的类组件，要么是带有一个参数(同样，props)的功能组件。 第二问题是您的函数在需要返回渲染的 React 元素时返回一个 React 功能组件。
解决此问题的一种方法是转换 mockComponent变成一个 React 功能组件并制作 module和 propOverride FC的 Prop 。

// 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接受单数 prop与 React.createElement() 兼容的参数.这导致了如何区分用于 CustomizedComponent 的 Prop 的问题。以及曾经是 mockComponent() 的论据.在这里，我使用 JavaScript 解构和扩展运算符来分隔 module和 propOverride来自 CustomizedComponent 的 Prop .
最后，我使用 JSX spread syntax传递用于 CustomizedComponent 的任意 Prop 进入 CustomizedComponent ，并且我使用尖括号来渲染它(而不是返回一个函数)。
我将作为练习留给您为 MockComponent 的 Prop 提出适当的 TypeScript 定义。您可以简单地将其定义为 Record 和 module 的并集和 propOverride .但是，您可以花哨并使用模板定义，因此 MockComponent<Toolbar>是 module 的并集和 propOverride和 Toolbar的 Prop 。
哦，我差点忘了。你的 Jest 电话看起来像

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