为什么我的笑话测试无法在带有打字稿的React native中失败？

Question

bounty到期在7天内。该问题的答案有资格获得+ 50声望赏金。HelloWorld希望引起更多关注对此问题：

我想要一个可行的解决方案，并解释它为什么起作用。

我已经使用打字稿在本机反应中建立了一个非常非常简单的组件。我的目标是建立Jest，并通过一个简单的测试。这是App.tsx的代码：

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

和测试：

import React from 'react';
import App from '../App';

import { create } from "react-test-renderer";

test('renders correctly', () => {
  const tree = create(<App />);
  expect(tree.toJSON()).toMatchSnapshot();
});

'Hello World'按预期方式渲染，但是当我运行测试时，我得到：

  console.error
    Warning: React.createElement: type is invalid -- expected a string (for built-in componen
ts) or a class/function (for composite components) but got: object.

确实，当我检查导出的函数'App'的类型时，它是一个React.Element而不是一个组件。但是为什么呢？它正在返回一个元素，但我认为这就是组件应该执行的操作。导出本身是一个无状态函数，所以我有点困惑...

Answer 1

这是我正在工作的解决方案。我创建了另一个react组件来呈现App组件。

import React from 'react';
import App from '../App';

import  renderer from "react-test-renderer";

function AppMirror(){
    return (
        <App />
    )
}

test('renders correctly', () => {
    const tree = renderer.create(<AppMirror />);
    expect(tree.toJSON()).toMatchSnapshot();
});

但是，我无法弄清为什么它不将其视为反应组件的主要原因。如果您知道了，请在评论中让我知道，我可以编辑我的答案。

这里是相关的GitHub Issue。