diff --git a/packages/ui/src/elements/Toasts/fieldErrors.tsx b/packages/ui/src/elements/Toasts/fieldErrors.tsx
index b0d110d7b..97d984ef9 100644
--- a/packages/ui/src/elements/Toasts/fieldErrors.tsx
+++ b/packages/ui/src/elements/Toasts/fieldErrors.tsx
@@ -63,11 +63,15 @@ export function FieldErrorsToast({ errorMessage }) {
{message}
{Array.isArray(errors) && errors.length > 0 ? (
-
- {errors.map((error, index) => {
- return - {error}
- })}
-
+ errors.length === 1 ? (
+
{errors[0]}
+ ) : (
+
+ {errors.map((error, index) => {
+ return - {error}
+ })}
+
+ )
) : null}
)
diff --git a/test/helpers/assertToastErrors.ts b/test/helpers/assertToastErrors.ts
index 3d1667184..4067ec73d 100644
--- a/test/helpers/assertToastErrors.ts
+++ b/test/helpers/assertToastErrors.ts
@@ -11,19 +11,24 @@ export async function assertToastErrors({
errors: string[]
page: Page
}): Promise {
- const message =
- errors.length === 1
- ? 'The following field is invalid:'
- : `The following fields are invalid (${errors.length}):`
- await expect(
- page.locator('.payload-toast-container li').filter({ hasText: message }),
- ).toBeVisible()
- for (let i = 0; i < errors.length; i++) {
- const error = errors[i]
- if (error) {
- await expect(
- page.locator('.payload-toast-container [data-testid="field-errors"] li').nth(i),
- ).toHaveText(error)
+ const isSingleError = errors.length === 1
+ const message = isSingleError
+ ? 'The following field is invalid:'
+ : `The following fields are invalid (${errors.length}):`
+
+ // Check the intro message text
+ await expect(page.locator('.payload-toast-container')).toContainText(message)
+
+ // Check single error
+ if (isSingleError) {
+ await expect(page.locator('.payload-toast-container [data-testid="field-error"]')).toHaveText(
+ errors[0]!,
+ )
+ } else {
+ // Check multiple errors
+ const errorItems = page.locator('.payload-toast-container [data-testid="field-errors"] li')
+ for (let i = 0; i < errors.length; i++) {
+ await expect(errorItems.nth(i)).toHaveText(errors[i]!)
}
}