fix rendering and storage issues for unit tests.

__fixtures__/initialProducts.ts

@@ -0,0 +1,11 @@
+import { Product } from "@/lib/product";
+import { area, length } from "enheter";
+
+export const products = [
+    // Sheet goods
+    new Product(35, area("squareFoot", 4 * 8), { name: "Plywood" }),
+    new Product(45, area("squareFoot", 4 * 8), { name: "OSB" }),
+    new Product(45, area("squareFoot", 4 * 8), { name: "MDF" }),
+    // Beams and trim
+    new Product(45, length("foot", 1), { name: "trim" }),
+];

__mocks__/@react-native-async-storage/async-storage.js

@@ -0,0 +1 @@
+export * from '@react-native-async-storage/async-storage/jest/async-storage-mock';

components/ProductEditor.tsx

@@ -1,13 +1,11 @@
 import { useAppDispatch, useAppSelector } from "@/app/store"
 import { deleteProduct, selectProducts, updateProduct } from "@/features/product/productSlice"
 import { Product } from "@/lib/product";
-import { FlatListComponent, StyleSheet, Text } from "react-native";
+import { FlatList, SafeAreaView, StyleSheet, Text } from "react-native";
-import { FlatList } from "react-native-reanimated/lib/typescript/Animated";
-import { SafeAreaView } from "react-native-safe-area-context";
 import { ProductEditorItem } from "./ProductEditorItem";
 import React from "react";
 
-export const ProductEditor = () => {
+export const ProductEditor = ({}) => {
     const products = useAppSelector(selectProducts) as Product [];
 
     const dispatch = useAppDispatch();
@@ -23,6 +21,7 @@ export const ProductEditor = () => {
 
     return (
         <SafeAreaView>
+            <Text>Hello</Text>
             <FlatList
             data={products}
             renderItem={

components/__tests__/ProductEditor-test.tsx

@@ -0,0 +1,23 @@
+import { renderWithProviders } from "@/lib/rendering";
+import { ProductEditor } from "@/components/ProductEditor";
+import {products as fixtures} from "../../__fixtures__/initialProducts";
+import React from "react";
+import { useAppSelector } from "@/app/store";
+import { selectProducts } from "@/features/product/productSlice";
+import { screen } from "@testing-library/react-native";
+
+describe("ProductEditor", () => {
+    it("renders correctly", async () => {
+        const {store} = renderWithProviders(<ProductEditor />, {
+            products: fixtures,
+        });
+
+        const products = store.getState();
+
+        // Check if the product names are rendered
+        expect(screen.getByText(products[0].attributes.name as string)).toBeTruthy();
+        expect(screen.getByText(products[1].attributes.name as string)).toBeTruthy();
+        expect(screen.getByText(products[2].attributes.name as string)).toBeTruthy();
+        expect(screen.getByText(products[3].attributes.name as string)).toBeTruthy();
+    });
+});

features/product/initialProducts.ts

@@ -1,11 +0,0 @@
-import { Price, Product } from "@/lib/product";
-import { area, length } from "enheter";
-
-export default [
-    // Sheet goods
-    new Product(new Price("USD", 35), area("squareFoot", 4 * 8), {name: "Plywood"}),
-    new Product(new Price("USD", 45), area("squareFoot", 4 * 8), {name: "OSB"}),
-    new Product(new Price("USD", 45), area("squareFoot", 4 * 8), {name: "MDF"}),
-    // Beams and trim
-    new Product(new Price("USD", 1), length("foot", 1), {name: "trim"}),
-]

lib/rendering.tsx

@@ -2,24 +2,19 @@ import { RenderOptions, render } from "@testing-library/react-native";
 import { PropsWithChildren, ReactElement } from "react";
 import { Provider } from "react-redux";
 import { setupStore, RootState } from "@/app/store";
-import { Price, Product } from "@/lib/product";
+import { Product } from "@/lib/product";
-import { area, length } from "enheter";
+import React from "react";
 
 export interface ExtendedRenderOptions extends Omit<RenderOptions, 'queries'> {
     preloadedState?: Partial<RootState>;
     store?: any; // TODO
 }
 
-const basicState = {
-    products: [
-        new Product(20.00, length("foot", 5), {name: "Track"}),
-        new Product(20.00, area("squareFoot", 5), {name: "Shelf"}),
-    ]
-}
-
 export function renderWithProviders(
     ui: ReactElement,
-    preloadedState = basicState,
+    preloadedState = {
+        products: [] as Product []
+    },
     extendedRenderOptions: ExtendedRenderOptions = {},
 ) {
     const {