react-native-modal 的 Jest Mock 中的 TypeScript JSX 语法错误：运算符“>”无法应用于类型“View”和“{children: React.ReactNode;” }’

Question

我正在尝试使用 TypeScript 在 React Native 项目中为react-native-modal 创建一个 Jest 模拟。但是，TypeScript 无法将 return 语句识别为有效的 JSX。它抛出以下错误：

Operator '>' cannot be applied to types 'View' and '{ children: React.ReactNode; }'.

我尝试了两种方法来解决该问题，但都会导致相同的错误。方法如下：

独立模拟文件：

import React from 'react';
import { View, ViewProps } from 'react-native';

interface ModalProps extends ViewProps {
  visible: boolean;
  children: React.ReactNode;
}

const Modal: React.FC<ModalProps> = ({ children, visible, ...props }) => {
  if (!visible) {
    return null;
  }

  return <View {...props}>{children}</View>;
};

export default Modal;

在 Jest 设置文件中：

jest.mock('react-native-modal', () => {
  const React = require('react');
  const View = require('react-native').View;
  return ({children, visible, ...props}) => {
    if (!visible) {
      return null;
    }
    return <View {...props}>{children}</View>;
  };
});

我已经验证了react-native和react导入是正确的，并且其他JSX组件工作正常。代码辅助和 TypeScript 错误消息对于查明语法问题没有多大帮助。

关于可能导致此错误的原因以及如何解决它有什么想法吗？ TypeScript 或 Jest 模拟中是否有我遗漏的 JSX 特定内容？

Answer 1

我认为 typeScript id 很难在模拟环境中正确推断 JSX 组件的类型。您为

react-native-modal

组件编写了一个模拟，但 typeScript 无法正确识别 return 语句中的 JSX，因此出现错误，指出它无法对类型应用某些操作。

为了让 TypeScript 理解预期的类型，我们必须显式定义类型

React.FC<ModalProps>

来告诉 TypeScript 这是一个定义了 props 的函数组件。

我已经更新了您的模拟文件以添加适当的类型：

jest.mock('react-native-modal', () => {
  const React = require('react');
  const View = require('react-native').View;

  interface ModalProps extends ViewProps {
    visible: boolean;
    children: React.ReactNode;
  }

  const Modal: React.FC<ModalProps> = ({ children, visible, ...props }) => {
    if (!visible) {
      return null;
    }

    return <View {...props}>{children}</View>;
  };

  return Modal;
})

还要确保您的 tsconfig 文件已配置为 jsx

{
  "compilerOptions": {
    "jsx": "react"
    .
    .
}

让我知道这是否有效！