diff --git a/packages/api-client/src/index.server.ts b/packages/api-client/src/index.server.ts
index 6d215a989..6f0e3da7a 100644
--- a/packages/api-client/src/index.server.ts
+++ b/packages/api-client/src/index.server.ts
@@ -32,6 +32,11 @@ const onCreate = (settings: Config): { config: Config; client: ClientInstance }
   const client = apolloClientFactory({
     link: apolloLink,
     ...settings.customOptions,
+    defaultOptions: {
+      query: {
+        errorPolicy: 'all',
+      },
+    },
   });
 
   return {
diff --git a/packages/composables/src/composables/useCart/index.ts b/packages/composables/src/composables/useCart/index.ts
index 4417029b8..6383819e0 100644
--- a/packages/composables/src/composables/useCart/index.ts
+++ b/packages/composables/src/composables/useCart/index.ts
@@ -56,6 +56,7 @@ const factoryParams: UseCartFactoryParams<Cart, CartItem, Product> = {
         throw errors[0];
       }
 
+      data.cart.items = data.cart.items.filter(Boolean);
       return data.cart as unknown as Cart;
     };
 
@@ -83,6 +84,7 @@ const factoryParams: UseCartFactoryParams<Cart, CartItem, Product> = {
         }
 
         apiState.setCartId(data.customerCart.id);
+        data.customerCart.items = data.customerCart.items.filter(Boolean);
 
         return data.customerCart as unknown as Cart;
       } catch {
@@ -381,7 +383,7 @@ const factoryParams: UseCartFactoryParams<Cart, CartItem, Product> = {
       currentCart,
       product,
     },
-  ) => !!currentCart?.items.find((cartItem) => cartItem.product.uid === product.uid),
+  ) => !!currentCart?.items.find((cartItem) => cartItem?.product?.uid === product.uid),
 };
 
 export default useCartFactory<Cart, CartItem, Product>(factoryParams);
diff --git a/packages/composables/src/getters/cartGetters.ts b/packages/composables/src/getters/cartGetters.ts
index 91af9f6aa..62bd7a97c 100644
--- a/packages/composables/src/getters/cartGetters.ts
+++ b/packages/composables/src/getters/cartGetters.ts
@@ -89,13 +89,7 @@ export const getItemAttributes = (
   return attributes;
 };
 
-export const getItemSku = (product: CartItem): string => {
-  if (!product.product) {
-    return '';
-  }
-
-  return product.product.sku;
-};
+export const getItemSku = (product: CartItem): string => product?.product?.sku || '';
 
 const calculateDiscounts = (discounts: Discount[]): number => discounts.reduce((a, b) => Number.parseFloat(`${a}`) + Number.parseFloat(`${b.amount.value}`), 0);
 
@@ -173,14 +167,13 @@ export const getAvailablePaymentMethods = (cart: Cart): AgnosticPaymentMethod[]
   value: p.code,
 }));
 
+export const getStockStatus = (product: CartItem): string => product.product.stock_status;
 export interface CartGetters extends CartGettersBase<Cart, CartItem> {
   getAppliedCoupon(cart: Cart): AgnosticCoupon | null;
-
   getAvailablePaymentMethods(cart: Cart): AgnosticPaymentMethod[];
-
   getSelectedShippingMethod(cart: Cart): SelectedShippingMethod | null;
-
   productHasSpecialPrice(product: CartItem): boolean;
+  getStockStatus(product: CartItem): string;
 }
 
 const cartGetters: CartGetters = {
@@ -202,6 +195,7 @@ const cartGetters: CartGetters = {
   getTotalItems,
   getTotals,
   productHasSpecialPrice,
+  getStockStatus,
 };
 
 export default cartGetters;
diff --git a/packages/theme/components/CartSidebar.vue b/packages/theme/components/CartSidebar.vue
index 440139830..8f855e858 100644
--- a/packages/theme/components/CartSidebar.vue
+++ b/packages/theme/components/CartSidebar.vue
@@ -105,8 +105,6 @@
                       $n(cartGetters.getItemPrice(product).special, 'currency')
                     : ''
                 "
-                :stock="99999"
-                :qty="cartGetters.getItemQty(product)"
                 :link="
                   localePath(
                     `/p/${cartGetters.getItemSku(product)}${cartGetters.getSlug(
@@ -119,7 +117,10 @@
                 @click:remove="sendToRemove({ product })"
               >
                 <template #input>
-                  <div class="sf-collected-product__quantity-wrapper">
+                  <div
+                    v-if="isInStock(product)"
+                    class="sf-collected-product__quantity-wrapper"
+                  >
                     <SfQuantitySelector
                       :disabled="loading"
                       :qty="cartGetters.getItemQty(product)"
@@ -127,6 +128,14 @@
                       @input="updateItemQty({ product, quantity: $event })"
                     />
                   </div>
+                  <SfBadge
+                    v-else
+                    class="color-danger sf-badge__absolute"
+                  >
+                    <template #default>
+                      <span>{{ $t('Out of stock') }}</span>
+                    </template>
+                  </SfBadge>
                 </template>
                 <template #configuration>
                   <div v-if="getAttributes(product).length > 0">
@@ -221,6 +230,7 @@
   </div>
 </template>
 <script>
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
 import {
   SfLoader,
   SfNotification,
@@ -232,13 +242,14 @@ import {
   SfCollectedProduct,
   SfImage,
   SfQuantitySelector,
+  SfBadge,
 } from '@storefront-ui/vue';
 import {
   computed,
   defineComponent,
   ref,
   useRouter,
-  useContext,
+  useContext, onMounted,
 } from '@nuxtjs/composition-api';
 import {
   useCart,
@@ -246,9 +257,9 @@ import {
   cartGetters,
   useExternalCheckout,
 } from '@vue-storefront/magento';
-import { onSSR } from '@vue-storefront/core';
 import { useUiState, useUiNotification } from '~/composables';
 import CouponCode from './CouponCode.vue';
+import stockStatusEnum from '~/enums/stockStatusEnum';
 
 export default defineComponent({
   name: 'CartSidebar',
@@ -263,6 +274,7 @@ export default defineComponent({
     SfCollectedProduct,
     SfImage,
     SfQuantitySelector,
+    SfBadge,
     CouponCode,
   },
   setup() {
@@ -280,7 +292,7 @@ export default defineComponent({
     const { isAuthenticated } = useUser();
     const { send: sendNotification, notifications } = useUiNotification();
 
-    const products = computed(() => cartGetters.getItems(cart.value));
+    const products = computed(() => cartGetters.getItems(cart.value).filter(Boolean));
     const totals = computed(() => cartGetters.getTotals(cart.value));
     const totalItems = computed(() => cartGetters.getTotalItems(cart.value));
     const getAttributes = (product) => product.configurable_options || [];
@@ -289,8 +301,9 @@ export default defineComponent({
     const isLoaderVisible = ref(false);
     const tempProduct = ref();
 
-    onSSR(async () => {
-      await loadCart();
+    onMounted(() => {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      loadCart();
     });
 
     const goToCheckout = async () => {
@@ -327,10 +340,12 @@ export default defineComponent({
       });
     };
 
+    const isInStock = (product) => cartGetters.getStockStatus(product) === stockStatusEnum.inStock;
+
     return {
       sendToRemove,
       actionRemoveItem,
-      loading,
+      loading: computed(() => (!!loading.value)),
       isAuthenticated,
       products,
       removeItem,
@@ -347,6 +362,7 @@ export default defineComponent({
       cartGetters,
       getAttributes,
       getBundles,
+      isInStock,
     };
   },
 });
@@ -494,5 +510,9 @@ export default defineComponent({
       }
     }
   }
+  .sf-badge__absolute {
+    position: absolute;
+    left: 0;
+  }
 }
 </style>
diff --git a/packages/theme/components/SearchResults.vue b/packages/theme/components/SearchResults.vue
index 22aeebade..257866744 100644
--- a/packages/theme/components/SearchResults.vue
+++ b/packages/theme/components/SearchResults.vue
@@ -36,7 +36,7 @@
               >
                 <SfMenuItem
                   :label="category.label"
-                  :link="localePath(th.getAgnosticCatLink(category))"
+                  :link="th.getAgnosticCatLink(category)"
                 >
                   <template #mobile-nav-icon>
                     &#8203;
@@ -76,7 +76,7 @@
                   :image="productGetters.getProductThumbnailImage(product)"
                   :alt="productGetters.getName(product)"
                   :title="productGetters.getName(product)"
-                  :link="localePath(`/p/${productGetters.getProductSku(product)}${productGetters.getSlug(product, product.categories[0])}`)"
+                  :link="`/p/${productGetters.getProductSku(product)}${productGetters.getSlug(product, product.categories[0])}`"
                   :wishlist-icon="isAuthenticated ? 'heart' : ''"
                   :is-in-wishlist-icon="isAuthenticated ? 'heart_fill' : ''"
                   :is-in-wishlist="product.isInWishlist"
@@ -96,7 +96,7 @@
                 :image="productGetters.getProductThumbnailImage(product)"
                 :alt="productGetters.getName(product)"
                 :title="productGetters.getName(product)"
-                :link="localePath(`/p/${productGetters.getProductSku(product)}${productGetters.getSlug(product, product.categories[0])}`)"
+                :link="`/p/${productGetters.getProductSku(product)}${productGetters.getSlug(product, product.categories[0])}`"
                 :wishlist-icon="isAuthenticated ? 'heart' : ''"
                 :is-in-wishlist-icon="isAuthenticated ? 'heart_fill' : ''"
                 :is-in-wishlist="product.isInWishlist"
diff --git a/packages/theme/components/__tests__/CartSidebar.spec.js b/packages/theme/components/__tests__/CartSidebar.spec.js
new file mode 100644
index 000000000..1889682cc
--- /dev/null
+++ b/packages/theme/components/__tests__/CartSidebar.spec.js
@@ -0,0 +1,94 @@
+import userEvent from '@testing-library/user-event';
+import {
+  useCart,
+  useUser,
+} from '@vue-storefront/magento';
+
+import { useUiState } from '~/composables';
+import {
+  render, useCartMock, useUserMock, useUiStateMock, useEmptyCartMock,
+} from '~/test-utils';
+import CartSidebar from '~/components/CartSidebar';
+
+jest.mock('@vue-storefront/magento', () => ({
+  ...jest.requireActual('@vue-storefront/magento'),
+  useExternalCheckout: jest.fn(() => ({ initializeCheckout: {} })),
+  useCart: jest.fn(),
+  useUser: jest.fn(),
+}));
+
+jest.mock('~/composables/useUiState');
+
+useUser.mockReturnValue(useUserMock());
+useCart.mockReturnValue(useCartMock());
+
+describe('<CartSidebar>', () => {
+  it('should be not visible by default', () => {
+    useUiState.mockReturnValue(useUiStateMock());
+    const { queryByText } = render(CartSidebar);
+    expect(queryByText('My Cart')).toBeNull();
+  });
+
+  describe('If the cart is empty', () => {
+    beforeAll(() => {
+      useCart.mockReturnValue(useEmptyCartMock());
+    });
+    describe('And the cart sidebar is open', () => {
+      it('should render empty state', () => {
+        useUiState.mockReturnValue(useUiStateMock({ isCartSidebarOpen: true }));
+        const { queryByText } = render(CartSidebar);
+        expect(queryByText('Your cart is empty')).toBeTruthy();
+      });
+
+      it('go back button must close the cart sidebar', () => {
+        const uiStateMock = useUiStateMock({ isCartSidebarOpen: true });
+        useUiState.mockReturnValue(uiStateMock);
+        const { queryByText } = render(CartSidebar);
+        const closeSidebarBtn = queryByText('Go back shopping');
+        expect(closeSidebarBtn).toBeTruthy();
+
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        userEvent.click(closeSidebarBtn);
+        expect(uiStateMock.toggleCartSidebar).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+
+  describe('If the cart has two products', () => {
+    beforeAll(() => {
+      useCart.mockReturnValue(useCartMock());
+      useUiState.mockReturnValue(useUiStateMock({ isCartSidebarOpen: true }));
+    });
+
+    it('should render two Product Cards', () => {
+      const { container } = render(CartSidebar);
+      const productCards = container.querySelectorAll('div.sf-collected-product');
+      expect(productCards).toHaveLength(2);
+    });
+
+    it('should display proper total items value', () => {
+      const { container } = render(CartSidebar);
+      const totalItemsLValue = container.querySelector('div.cart-summary .sf-property__value');
+      const totalItemsLabel = container.querySelector('div.cart-summary .sf-property__name');
+      expect(totalItemsLabel).toHaveTextContent('Total items');
+      expect(totalItemsLValue).toHaveTextContent(2);
+    });
+
+    it('should render "go to checkout" button', () => {
+      const { getByText } = render(CartSidebar);
+      expect(getByText('Go to checkout')).toBeTruthy();
+    });
+
+    it('should render promo code input', () => {
+      const { getByTestId } = render(CartSidebar);
+      expect(getByTestId('promoCode')).toBeTruthy();
+    });
+
+    describe('And exactly one product is out of stock', () => {
+      it('should display exactly one out of stock badge', () => {
+        const { getAllByText } = render(CartSidebar);
+        expect(getAllByText('Out of stock')).toHaveLength(1);
+      });
+    });
+  });
+});
diff --git a/packages/theme/enums/stockStatusEnum.js b/packages/theme/enums/stockStatusEnum.js
new file mode 100644
index 000000000..2a42386a7
--- /dev/null
+++ b/packages/theme/enums/stockStatusEnum.js
@@ -0,0 +1,4 @@
+module.exports = {
+  inStock: 'IN_STOCK',
+  outOfStock: 'OUT_OF_STOCK',
+};
diff --git a/packages/theme/lang/en.js b/packages/theme/lang/en.js
index 131b991c0..3692e34fb 100644
--- a/packages/theme/lang/en.js
+++ b/packages/theme/lang/en.js
@@ -167,5 +167,6 @@ export default {
   forgotPasswordConfirmation: 'Thanks! If there is an account registered with the {0} email, you will find message with a password reset link in your inbox.',
   subscribeToNewsletterModalContent: 'After signing up for the newsletter, you will receive special offers and messages from VSF via email. We will not sell or distribute your email to any third party at any time. Please see our {0}.',
   'Default Shipping Address': 'Default Shipping Address',
-  'Default Billing Address': 'Default Billing Address'
+  'Default Billing Address': 'Default Billing Address',
+  'Out of stock': 'Out of stock'
 };
diff --git a/packages/theme/layouts/default.vue b/packages/theme/layouts/default.vue
index 91b7b65db..c38521c29 100644
--- a/packages/theme/layouts/default.vue
+++ b/packages/theme/layouts/default.vue
@@ -26,7 +26,6 @@ import LazyHydrate from 'vue-lazy-hydration';
 import { onSSR } from '@vue-storefront/core';
 import { useRoute, defineComponent } from '@nuxtjs/composition-api';
 import {
-  useCart,
   useUser,
 } from '@vue-storefront/magento';
 import AppHeader from '~/components/AppHeader.vue';
@@ -57,16 +56,12 @@ export default defineComponent({
   setup() {
     const route = useRoute();
     const { load: loadUser } = useUser();
-    const { load: loadCart } = useCart();
 
     const { loadConfiguration } = useMagentoConfiguration();
 
     onSSR(async () => {
       await loadConfiguration();
-      await Promise.all([
-        loadUser(),
-        loadCart(),
-      ]);
+      await loadUser();
     });
 
     return {
diff --git a/packages/theme/test-utils.js b/packages/theme/test-utils.js
index 28eadd423..db04f2a9c 100644
--- a/packages/theme/test-utils.js
+++ b/packages/theme/test-utils.js
@@ -1,15 +1,18 @@
 import { render } from '@testing-library/vue';
 
 const $t = (text) => text;
-
+const $n = (text) => text;
+const localePath = (path) => path;
 // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
 const customRender = (component, options = {}, callback = null) => render(component, {
   mocks: {
     $t,
+    $n,
+    localePath,
     $nuxt: {
       context: {
         app: {
-          localePath: (path) => path,
+          localePath,
         },
       },
     },
diff --git a/packages/theme/test-utils/mocks/cartGetters.js b/packages/theme/test-utils/mocks/cartGetters.js
new file mode 100644
index 000000000..6ff5308dd
--- /dev/null
+++ b/packages/theme/test-utils/mocks/cartGetters.js
@@ -0,0 +1,11 @@
+import stockStatusEnum from '~/enums/stockStatusEnum';
+
+export const cartGettersMock = (extend = {}) => ({
+  getItems: jest.fn(() => []),
+  getTotals: jest.fn(() => 0),
+  getTotalItems: jest.fn(),
+  getStockStatus: jest.fn(() => stockStatusEnum.inStock),
+  ...extend,
+});
+
+export default cartGettersMock;
diff --git a/packages/theme/test-utils/mocks/index.js b/packages/theme/test-utils/mocks/index.js
index 150a845ab..2800c9c23 100644
--- a/packages/theme/test-utils/mocks/index.js
+++ b/packages/theme/test-utils/mocks/index.js
@@ -1,2 +1,5 @@
 export * from './useGuestUser';
 export * from './useUser';
+export * from './useCart';
+export * from './useUiState';
+export * from './cartGetters';
diff --git a/packages/theme/test-utils/mocks/useCart.js b/packages/theme/test-utils/mocks/useCart.js
new file mode 100644
index 000000000..5d329f040
--- /dev/null
+++ b/packages/theme/test-utils/mocks/useCart.js
@@ -0,0 +1,301 @@
+export const useEmptyCartMock = (cartData = {}) => ({
+  load: jest.fn(),
+  loading: {
+    value: false,
+  },
+  removeItem: jest.fn(),
+  updateItemQty: jest.fn(),
+  cart: {
+    value: {},
+  },
+  ...cartData,
+});
+
+export const useCartMock = (cartData = {}) => ({
+  load: jest.fn(),
+  loading: {
+    value: false,
+  },
+  removeItem: jest.fn(),
+  updateItemQty: jest.fn(),
+  cart: {
+    value: {
+      items: [
+        {
+          __typename: 'Product1',
+          uid: 'NDUw',
+          product: {
+            __typename: 'Product1',
+            uid: 'MTAzNA==',
+            sku: 'Product1',
+            name: 'Product1',
+            stock_status: 'OUT_OF_STOCK',
+            only_x_left_in_stock: null,
+            rating_summary: 0,
+            thumbnail: {
+              __typename: 'ProductImage',
+              url: 'https://xxx.jpg',
+              position: null,
+              disabled: null,
+              label: 'Product1',
+            },
+            url_key: 'product-1',
+            url_rewrites: [
+              {
+                __typename: 'UrlRewrite',
+                url: 'product-1.html',
+              },
+            ],
+            price_range: {
+              __typename: 'PriceRange',
+              maximum_price: {
+                __typename: 'ProductPrice',
+                final_price: {
+                  __typename: 'Money',
+                  currency: 'USD',
+                  value: 27,
+                },
+                regular_price: {
+                  __typename: 'Money',
+                  currency: 'USD',
+                  value: 27,
+                },
+              },
+              minimum_price: {
+                __typename: 'ProductPrice',
+                final_price: {
+                  __typename: 'Money',
+                  currency: 'USD',
+                  value: 27,
+                },
+                regular_price: {
+                  __typename: 'Money',
+                  currency: 'USD',
+                  value: 27,
+                },
+              },
+            },
+            categories: [
+              {
+                __typename: 'CategoryTree',
+                uid: 'MTM=',
+                name: 'Bottoms',
+                url_suffix: '.html',
+                url_path: 'men/bottoms-men',
+                breadcrumbs: [
+                  {
+                    __typename: 'Breadcrumb',
+                    category_name: 'Men',
+                    category_url_path: 'men',
+                  },
+                ],
+              },
+              {
+                __typename: 'CategoryTree',
+                uid: 'MTk=',
+                name: 'Shorts',
+                url_suffix: '.html',
+                url_path: 'men/bottoms-men/shorts-men',
+                breadcrumbs: [
+                  {
+                    __typename: 'Breadcrumb',
+                    category_name: 'Men',
+                    category_url_path: 'men',
+                  },
+                  {
+                    __typename: 'Breadcrumb',
+                    category_name: 'Bottoms',
+                    category_url_path: 'men/bottoms-men',
+                  },
+                ],
+              },
+              {
+                __typename: 'CategoryTree',
+                uid: 'MzE=',
+                name: 'Men Sale',
+                url_suffix: '.html',
+                url_path: 'promotions/men-sale',
+                breadcrumbs: null,
+              },
+            ],
+            review_count: 0,
+            reviews: {
+              __typename: 'ProductReviews',
+              items: [],
+            },
+          },
+          prices: {
+            __typename: 'CartItemPrices',
+            row_total: {
+              __typename: 'Money',
+              value: 27,
+            },
+            row_total_including_tax: {
+              __typename: 'Money',
+              value: 27,
+            },
+            total_item_discount: {
+              __typename: 'Money',
+              value: 0,
+            },
+          },
+          quantity: 1,
+          configurable_options: [
+            {
+              __typename: 'SelectedConfigurableOption',
+              configurable_product_option_uid: 'Y29uZmlndXJhYmxlLzEwMzQvOTM=',
+              option_label: 'Color',
+              configurable_product_option_value_uid: 'Y29uZmlndXJhYmxlLzkzLzQ5',
+              value_label: 'Black',
+            },
+            {
+              __typename: 'SelectedConfigurableOption',
+              configurable_product_option_uid: 'Y29uZmlndXJhYmxlLzEwMzQvMTQ0',
+              option_label: 'Size',
+              configurable_product_option_value_uid: 'Y29uZmlndXJhYmxlLzE0NC8xNzc=',
+              value_label: '34',
+            },
+          ],
+        },
+        {
+          __typename: 'Product2',
+          uid: 'NDUw2',
+          product: {
+            __typename: 'Product2',
+            uid: 'MTAzNA==',
+            sku: 'Product2',
+            name: 'Product2',
+            stock_status: 'IN_STOCK',
+            only_x_left_in_stock: null,
+            rating_summary: 0,
+            thumbnail: {
+              __typename: 'ProductImage',
+              url: 'https://xxx.jpg',
+              position: null,
+              disabled: null,
+              label: 'Product2',
+            },
+            url_key: 'product-2',
+            url_rewrites: [
+              {
+                __typename: 'UrlRewrite',
+                url: 'product-2.html',
+              },
+            ],
+            price_range: {
+              __typename: 'PriceRange',
+              maximum_price: {
+                __typename: 'ProductPrice',
+                final_price: {
+                  __typename: 'Money',
+                  currency: 'USD',
+                  value: 10,
+                },
+                regular_price: {
+                  __typename: 'Money',
+                  currency: 'USD',
+                  value: 10,
+                },
+              },
+              minimum_price: {
+                __typename: 'ProductPrice',
+                final_price: {
+                  __typename: 'Money',
+                  currency: 'USD',
+                  value: 10,
+                },
+                regular_price: {
+                  __typename: 'Money',
+                  currency: 'USD',
+                  value: 10,
+                },
+              },
+            },
+            categories: [
+              {
+                __typename: 'CategoryTree',
+                uid: 'MTM=',
+                name: 'Bottoms',
+                url_suffix: '.html',
+                url_path: 'men/bottoms-men',
+                breadcrumbs: [
+                  {
+                    __typename: 'Breadcrumb',
+                    category_name: 'Men',
+                    category_url_path: 'men',
+                  },
+                ],
+              },
+              {
+                __typename: 'CategoryTree',
+                uid: 'MTk=',
+                name: 'Shorts',
+                url_suffix: '.html',
+                url_path: 'men/bottoms-men/shorts-men',
+                breadcrumbs: [
+                  {
+                    __typename: 'Breadcrumb',
+                    category_name: 'Men',
+                    category_url_path: 'men',
+                  },
+                  {
+                    __typename: 'Breadcrumb',
+                    category_name: 'Bottoms',
+                    category_url_path: 'men/bottoms-men',
+                  },
+                ],
+              },
+              {
+                __typename: 'CategoryTree',
+                uid: 'MzE=',
+                name: 'Men Sale',
+                url_suffix: '.html',
+                url_path: 'promotions/men-sale',
+                breadcrumbs: null,
+              },
+            ],
+            review_count: 0,
+            reviews: {
+              __typename: 'ProductReviews',
+              items: [],
+            },
+          },
+          prices: {
+            __typename: 'CartItemPrices',
+            row_total: {
+              __typename: 'Money',
+              value: 10,
+            },
+            row_total_including_tax: {
+              __typename: 'Money',
+              value: 10,
+            },
+            total_item_discount: {
+              __typename: 'Money',
+              value: 0,
+            },
+          },
+          quantity: 1,
+          configurable_options: [
+            {
+              __typename: 'SelectedConfigurableOption',
+              configurable_product_option_uid: 'Y29uZmlndXJhYmxlLzEwMzQvOTM=',
+              option_label: 'Color',
+              configurable_product_option_value_uid: 'Y29uZmlndXJhYmxlLzkzLzQ5',
+              value_label: 'Black',
+            },
+            {
+              __typename: 'SelectedConfigurableOption',
+              configurable_product_option_uid: 'Y29uZmlndXJhYmxlLzEwMzQvMTQ0',
+              option_label: 'Size',
+              configurable_product_option_value_uid: 'Y29uZmlndXJhYmxlLzE0NC8xNzc=',
+              value_label: '34',
+            },
+          ],
+        },
+      ],
+      total_quantity: 2,
+    },
+  },
+  ...cartData,
+});
diff --git a/packages/theme/test-utils/mocks/useUiState.js b/packages/theme/test-utils/mocks/useUiState.js
new file mode 100644
index 000000000..4a7b63542
--- /dev/null
+++ b/packages/theme/test-utils/mocks/useUiState.js
@@ -0,0 +1,7 @@
+export const useUiStateMock = (extend = {}) => ({
+  isCartSidebarOpen: false,
+  toggleCartSidebar: jest.fn(),
+  ...extend,
+});
+
+export default useUiStateMock;