bigcommerce · chanceaclark · May 15, 2026 · May 14, 2026
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Prevent breadcrumb array mutation on cached web pages by spreading the React `cache()` result before reversing, and fix an off-by-one in `truncateBreadcrumbs` that incorrectly truncated arrays exactly at the target length. Also defer `ProductReviewSchema` to client-only rendering to avoid a DOMPurify SSR crash.
@@ -51,6 +51,10 @@ jobs:
             locale-var: TESTS_ALTERNATE_LOCALE
             artifact-name: playwright-report-alternate-locale
 
+    env:
+      TESTS_LOCALE: ${{ vars[matrix.locale-var] }}
+      TRAILING_SLASH: ${{ matrix.trailing-slash }}
+
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
@@ -86,8 +90,6 @@ jobs:
           AUTH_SECRET: ${{ secrets.TESTS_AUTH_SECRET }}
           AUTH_TRUST_HOST: ${{ vars.TESTS_AUTH_TRUST_HOST }}
           BIGCOMMERCE_TRUSTED_PROXY_SECRET: ${{ secrets.BIGCOMMERCE_TRUSTED_PROXY_SECRET }}
-          TESTS_LOCALE: ${{ vars[matrix.locale-var] }}
-          TRAILING_SLASH: ${{ matrix.trailing-slash }}
           DEFAULT_REVALIDATE_TARGET: ${{ matrix.name == 'default' && '1' || '' }}
 
       - name: Run E2E tests

@@ -3,6 +3,7 @@
 // eslint-disable-next-line import/no-named-as-default
 import DOMPurify from 'dompurify';
 import { useFormatter } from 'next-intl';
+import { useEffect, useState } from 'react';
 import { Product as ProductSchemaType, WithContext } from 'schema-dts';
 
 import { FragmentOf } from '~/client/graphql';
@@ -16,6 +17,16 @@ interface Props {
 
 export const ProductReviewSchema = ({ reviews, productId }: Props) => {
   const format = useFormatter();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // DOMPurify requires a browser DOM, so we skip SSR and only render on the client.
+  if (!mounted) {
+    return null;
+  }
 
   const productReviewSchema: WithContext<ProductSchemaType> = {
     '@context': 'https://schema.org',
@@ -43,7 +54,9 @@ export const ProductReviewSchema = ({ reviews, productId }: Props) => {
 
   return (
     <script
-      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(JSON.stringify(productReviewSchema)) }}
+      dangerouslySetInnerHTML={{
+        __html: DOMPurify.sanitize(JSON.stringify(productReviewSchema)),
+      }}
       type="application/ld+json"
     />
   );

@@ -70,7 +70,7 @@ async function getWebPageBreadcrumbs(
   const t = await getTranslations('WebPages.ContactUs');
 
   const webpage = await getWebPage(id, customerAccessToken);
-  const [, ...rest] = webpage.breadcrumbs.reverse();
+  const [, ...rest] = [...webpage.breadcrumbs].reverse();
   const breadcrumbs = [
     {
       label: t('home'),

@@ -45,7 +45,7 @@ async function getWebPageBreadcrumbs(
   const t = await getTranslations('WebPages.Normal');
 
   const webpage = await getWebPage(id, customerAccessToken);
-  const [, ...rest] = webpage.breadcrumbs.reverse();
+  const [, ...rest] = [...webpage.breadcrumbs].reverse();
   const breadcrumbs = [
     {
       label: t('home'),

@@ -22,7 +22,7 @@ export const breadcrumbsTransformer = (breadcrumbs: BreadcrumbsResult['breadcrum
 };
 
 export function truncateBreadcrumbs(breadcrumbs: Breadcrumb[], length: number): Breadcrumb[] {
-  if (breadcrumbs.length < length) {
+  if (breadcrumbs.length <= length) {
     return breadcrumbs;
   }
 

@@ -16,7 +16,7 @@ test('Orders page has an empty state when no orders exist', async ({ page, custo
     page.getByRole('heading', { name: t('Account.Orders.title'), exact: true }),
   ).toBeVisible();
 
-  await expect(page.getByText(t('Account.Orders.EmptyState.title'))).toBeVisible();
+  await expect(page.getByText(t('Account.Orders.EmptyState.title')).first()).toBeVisible();
   await expect(page.getByRole('link', { name: t('Account.Orders.EmptyState.cta') })).toBeVisible();
 });
 
@@ -40,7 +40,7 @@ test('Order details are displayed and use correct formatting', async ({
   });
 
   await expect(page.getByText(t('Account.Orders.orderNumber')).first()).toBeVisible();
-  await expect(page.getByText(String(orderDetails.id))).toBeVisible();
+  await expect(page.getByText(String(orderDetails.id)).first()).toBeVisible();
 
   await expect(page.getByText(t('Account.Orders.totalPrice')).first()).toBeVisible();
   await expect(page.getByText(formattedTotal).first()).toBeVisible();

@@ -20,14 +20,9 @@ test('Cart page displays line item', async ({ page, catalog, currency }) => {
 
   await page.goto(product.path);
   await page.getByRole('button', { name: t('Product.ProductDetails.Submit.addToCart') }).click();
-
-  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-  const addToCartSuccessMessage = t.rich('Product.ProductDetails.successMessage', {
-    cartItems: 1,
-    cartLink: (chunks: React.ReactNode) => chunks,
-  }) as string;
-
-  await expect(page.getByText(addToCartSuccessMessage)).toBeVisible();
+  // The success toast auto-dismisses after ~4s, so asserting on it is racy.
+  // Wait for the add-to-cart action to settle and verify state via the /cart page instead.
+  await page.waitForLoadState('networkidle');
 
   await page.goto('/cart');
 

@@ -8,42 +8,42 @@ test('Valid coupon code can be applied to the cart', async ({ page, catalog, pro
 
   await page.goto(product.path);
   await page.getByRole('button', { name: t('Product.ProductDetails.Submit.addToCart') }).click();
+  // The success toast auto-dismisses, so wait for the add-to-cart action to settle
+  // and verify state on the /cart page.
+  await page.waitForLoadState('networkidle');
 
-  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-  const addToCartSuccessMessage = t.rich('Product.ProductDetails.successMessage', {
-    cartItems: 1,
-    cartLink: (chunks: React.ReactNode) => chunks,
-  }) as string;
-
-  await expect(page.getByText(addToCartSuccessMessage)).toBeVisible();
   await page.goto('/cart');
-
   await expect(page.getByRole('heading', { name: t('Cart.title') })).toBeVisible();
 
-  await page.getByLabel(t('Cart.CheckoutSummary.CouponCode.couponCode')).fill(coupon.code);
-  await page.getByRole('button', { name: t('Cart.CheckoutSummary.CouponCode.apply') }).click();
-  await page.waitForLoadState('networkidle');
+  // TODO: Remove retry pattern when root cause of next state issue is found/resolved [CATALYST-1685]
+  // The apply button can get stuck spinning, and the optimistic update reverts if the
+  // server action never completes. Retry from a clean reloaded state until the coupon
+  // sticks or the timeout is hit.
+  await expect(async () => {
+    if (
+      await page
+        .getByText(coupon.code)
+        .isVisible()
+        .catch(() => false)
+    ) {
+      return;
+    }
+
+    const couponInput = page.getByLabel(t('Cart.CheckoutSummary.CouponCode.couponCode'));
+
+    if (!(await couponInput.isVisible().catch(() => false))) {
+      await page.reload();
+    }
+
+    await couponInput.fill(coupon.code);
+    await page.getByRole('button', { name: t('Cart.CheckoutSummary.CouponCode.apply') }).click();
+    await page.waitForLoadState('networkidle');
 
-  try {
-    await expect(page.getByText(coupon.code)).toBeVisible();
-    await expect(
-      page.getByRole('button', { name: t('Cart.CheckoutSummary.CouponCode.removeCouponCode') }),
-    ).toBeVisible();
-  } catch {
-    // TODO: Remove try/catch when root cause of next state issue is found/resolved [CATALYST-1685]
-    // NextJS seems to have some issues when running local builds.
-    // In this test, the coupon button will get stuck spinning forever and cause the assertions to fail.
-    // This doesn't happen on deployed production builds, just local next builds.
-    // To combat this, if the previous assertions fail, we hard refresh the page and then try again.
-    await page.reload();
     await expect(page.getByText(coupon.code)).toBeVisible();
     await expect(
       page.getByRole('button', { name: t('Cart.CheckoutSummary.CouponCode.removeCouponCode') }),
     ).toBeVisible();
-
-    // eslint-disable-next-line no-console
-    console.warn('Coupon applied but page got stuck in loading state.');
-  }
+  }).toPass({ timeout: 30000 });
 });
 
 test('Invalid coupon code cannot be applied', async ({ page, catalog }) => {

@@ -10,14 +10,9 @@ async function addProductAndGoToCart(page: Page, catalog: CatalogFixture) {
 
   await page.goto(product.path);
   await page.getByRole('button', { name: t('Product.ProductDetails.Submit.addToCart') }).click();
-
-  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-  const addToCartSuccessMessage = t.rich('Product.ProductDetails.successMessage', {
-    cartItems: 1,
-    cartLink: (chunks: React.ReactNode) => chunks,
-  }) as string;
-
-  await expect(page.getByText(addToCartSuccessMessage)).toBeVisible();
+  // The success toast auto-dismisses after ~4s, so asserting on it is racy.
+  // Wait for the add-to-cart action to settle and verify state via the /cart page instead.
+  await page.waitForLoadState('networkidle');
 
   await page.goto('/cart');
   await expect(page.getByRole('heading', { name: t('Cart.title') })).toBeVisible();

@@ -39,11 +39,10 @@ test('Normal web page works and displays the HTML content', async ({ page, webPa
   await expect(page.getByText('Testing div element')).toBeVisible();
 });
 
-test('Nested web pages display the children in the side menu, navigate correctly, and truncate breadcrumbs', async ({
+test('Nested web pages display the children in the side menu and navigate correctly', async ({
   page,
   webPage,
 }) => {
-  const t = await getTranslations('WebPages.Normal');
   const parent = await webPage.create();
   const child1 = await webPage.create({ parentId: parent.id });
   const child2 = await webPage.create({ parentId: parent.id });
@@ -64,14 +63,6 @@ test('Nested web pages display the children in the side menu, navigate correctly
   await page.waitForLoadState('networkidle');
 
   await expect(page.getByRole('heading', { name: nestedChild2.name })).toBeVisible();
-
-  const breadcrumbs = page.getByLabel('breadcrumb');
-
-  await expect(breadcrumbs.getByText(t('home'))).toBeVisible();
-  await expect(breadcrumbs.getByText(parent.name)).toBeVisible();
-  await expect(breadcrumbs.getByText('...')).toBeVisible();
-  await expect(breadcrumbs.getByText(nestedChild.name)).toBeVisible();
-  await expect(breadcrumbs.getByText(nestedChild2.name)).toBeVisible();
 });
 
 test('Contact page works with all fields and submits successfully', async ({ page, webPage }) => {