反应本机 + 开玩笑 - 平面列表错误 - "ReactDebugCurrentFrame.setExtraStackFrame is not a function"

Question

我正在尝试使用Jest测试一个简单的React Native (Expo Managed)基于flatlist的组件。Jest是使用"preset": "jest-expo"设置设置的。

组件的代码如下:

import { FlatList } from "react-native";
import React from "react";
import { Message } from "../../../graph/graph";
import MessageComponent from "../message";
export interface MessageStackProps {
messages: Message[];
}
export default function MessageStack({ messages }: MessageStackProps) {
const renderItem = ({ item }) => {
const message = item as Message;
return (
<MessageComponent
text={message.text}
targetStatuses={[]}
sentDate={new Date()}
/>
);
};
return <FlatList data={messages} renderItem={renderItem} />;
}

我的测试如下:

function render(messages: Partial<Message>[] = []) {
return render(<MessageStack messages={messages as Message[]} />);
}
it("should render a single message for one message", () => {
const message: Partial<Message> = {
id: 1,
text: "Test message",
};
const { getAllByText } = render([message]);
expect(getAllByText(/message/i)).toBeArrayOfSize(1);
});

运行此测试时，我收到以下错误:

TypeError: ReactDebugCurrentFrame.setExtraStackFrame is not a function
The above error occurred in the <CellRenderer> component:

我在这里做错了什么，还是这是一个已知的问题?

我将感激任何帮助!谢谢!

Answer 1

在野外只是一个猜测:你能尝试添加一个key道具到MessageComponent吗?

const renderItem = ({ item }) => {
const message = item as Message;
return (
<MessageComponent
key={message.id}
text={message.text}
targetStatuses={[]}
sentDate={new Date()}
/>
);
};