trying to figure out jest issue.

components/ui/MessageBubble.tsx

@@ -0,0 +1,64 @@
+import { Translator } from "@/app/i18n/api";
+import { Message, Speaker } from "@/app/lib/conversation";
+import { useState } from "react";
+import { StyleSheet, Text } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+type MessageProps = {
+    message: Message;
+    translator: Translator;
+}
+
+const MessageBubble = (props: MessageProps) => {
+    const [text, setText] = useState(props.message.text);
+    const [translatedText, setTranslatedText] = useState(props.message.text);
+    const [isTranslating, setIsTranslating] = useState<boolean>(false);
+
+    props.message.onTextUpdate = (message: Message) => {
+        setText(message.text);
+    }
+
+    props.message.onTextDone = async (message: Message) => {
+        setIsTranslating(true);
+        await props.message.translate(props.translator)
+    }
+
+    props.message.onTranslationDone = (message: Message) => {
+        if (!message.translation) throw new Error("Missing translation");
+        setTranslatedText(message.translation);
+        setIsTranslating(false);
+    }
+
+    const spId = props.message.speaker.id
+
+    return (
+        <SafeAreaView>
+            {text && (
+                <Text>{text}</Text>
+            )}
+            {translatedText &&
+                <Text>{translatedText}</Text>
+            }
+        </SafeAreaView>
+    )
+}
+
+// const bubbleStyle = StyleSheet.create({
+//     host: {
+
+//     },
+//     guest: {
+
+//     },
+// })
+
+// const textStyles = StyleSheet.create({
+//     native: {
+
+//     },
+//     translation: {
+
+//     },
+// });
+
+export default MessageBubble;

components/ui/__tests__/Message.spec.tsx

@@ -0,0 +1,51 @@
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react-native'
+import MessageBubble from '@/components/ui/MessageBubble';
+import { Conversation, Speaker } from '@/app/lib/conversation';
+import {Translator} from '@/app/i18n/api';
+import { View } from 'react-native';
+
+describe('Message Component', () => {
+    const translator = new Translator('en', 'es');
+
+    const host : Speaker = {id : "host", language : "en"}
+    const guest : Speaker = {id : "guest", language: "es"}
+
+    let conversation : Conversation;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        conversation = new Conversation(translator, host, guest);
+    });
+
+    it('renders the message text correctly', async () => {
+        conversation.addMessage(host, "Hello, World!");
+        const message = conversation[0];
+        render(<View></View>);
+        // render(<MessageBubble message={message} />);
+        expect(await screen.findByText(message.text as string)).toBeOnTheScreen();
+    });
+
+    it('translates the message when target language is provided', async () => {
+        const translatedText = 'Hola, ¿cómo estás?';
+        conversation.addMessage(host, "Hello, how are you?");
+        await conversation.translateLast();
+
+        render(<MessageBubble message={conversation[0]} translator={translator} />);
+        expect(await screen.findByText(translatedText)).toBeOnTheScreen();
+    });
+
+    it('widget still renders pre-translation', async () => {
+        const text = "Hello, how are you?"
+        const translatedText = 'Hola, ¿cómo estás?';
+        conversation.addMessage(host, text);
+        render(<MessageBubble message={conversation[0]} translator={translator} />);
+        expect(await screen.findByText(text)).toBeOnTheScreen();
+        expect(await screen.findByText(translatedText)).not.toBeOnTheScreen();
+        await act(async () => {
+            await conversation.translateLast();
+        });
+        expect(await screen.findByText(text)).toBeOnTheScreen();
+        expect(await screen.findByText(translatedText)).toBeOnTheScreen();
+    });
+});