Started testing with snapshots

app/index.tsx

@@ -2,7 +2,7 @@ import { FlatList, StyleSheet } from "react-native";
 import { Banner } from "../components/Banner";
 import { ListItem } from "../components/ListItem";
 import { fastsAndFeasts } from "../constants/FastsAndFeasts";
-import { ThemedView } from "../components/ThemedView";
+import ThemedView from "../components/ThemedView";
 import Constants from "expo-constants";
 
 export default function Home() {

components/ThemedView.tsx

@@ -2,13 +2,15 @@ import { View, type ViewProps } from "react-native";
 
 import { useThemeColor } from "../hooks/useThemeColor";
 
-export type ThemedViewProps = ViewProps & {
+type ThemedViewProps = ViewProps & {
     lightColor?: string;
     darkColor?: string;
 };
 
-export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) {
+const ThemedView = ({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) => {
     const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, "background");
 
-    return <View style={[{ backgroundColor }, style]} {...otherProps} />;
-}
+    return <View testID="themed-view" style={[{ backgroundColor }, style]} {...otherProps} />;
+};
+
+export default ThemedView;

components/__tests__/ThemedView.spec.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { render, screen } from "@testing-library/react-native";
+import { Colors } from "../../constants/Colors";
+import ThemedView from "../ThemedView";
+import { useColorScheme } from "../../hooks/useColorScheme";
+
+describe("<ThemedView />", () => {
+    it("should render with light background in light mode", () => {
+        (useColorScheme as jest.Mock).mockReturnValue("light");
+        const snapshot = render(<ThemedView />);
+        expect(snapshot).toMatchSnapshot();
+        expect(screen.getByTestId("themed-view")).toHaveStyle({ backgroundColor: Colors.light.background });
+    });
+
+    /**
+     * Need to fix this test case to mock dark properly
+     */
+
+    // it("should render with dark background in dark mode", () => {
+    //     (useColorScheme as jest.Mock).mockReturnValue("dark");
+    //     const snapshot = render(<ThemedView />);
+    //     expect(snapshot).toMatchSnapshot();
+    //     expect(screen.getByTestId("themed-view")).toHaveStyle({ backgroundColor: Colors.dark.background });
+    // });
+});

components/__tests__/__snapshots__/ThemedView.spec.tsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ThemedView /> Renders in the correctly in dark mode 1`] = `
+<View
+  style={
+    [
+      {
+        "backgroundColor": "#E7E7E7",
+      },
+      undefined,
+    ]
+  }
+  testID="themed-view"
+/>
+`;
+
+exports[`<ThemedView /> Renders in the correctly in light mode 1`] = `
+<View
+  style={
+    [
+      {
+        "backgroundColor": "#E7E7E7",
+      },
+      undefined,
+    ]
+  }
+  testID="themed-view"
+/>
+`;