fix: handle zod unions closes #4204

Author: logaretm

.changeset/purple-mayflies-share.md

@@ -0,0 +1,9 @@
+---
+'@vee-validate/i18n': patch
+'@vee-validate/rules': patch
+'vee-validate': patch
+'@vee-validate/yup': patch
+'@vee-validate/zod': patch
+---
+
+fixed zod union issues not showing up as errors closes #4204

packages/zod/src/index.ts

@@ -1,4 +1,4 @@
-import { ZodObject, input, output, ZodDefault, ZodSchema, ParseParams } from 'zod';
+import { ZodObject, input, output, ZodDefault, ZodSchema, ParseParams, ZodIssue } from 'zod';
 import { PartialDeep } from 'type-fest';
 import type { TypedSchema, TypedSchemaError } from 'vee-validate';
 import { isIndex, isObject, merge } from '../../shared';
@@ -22,16 +22,8 @@ export function toTypedSchema<
         };
       }
 
-      const errors: Record<string, TypedSchemaError> = result.error.issues.reduce((acc, issue) => {
-        const path = joinPath(issue.path);
-        if (!acc[path]) {
-          acc[path] = { errors: [], path };
-        }
-
-        acc[path].errors.push(issue.message);
-
-        return acc;
-      }, {} as Record<string, TypedSchemaError>);
+      const errors: Record<string, TypedSchemaError> = {};
+      processIssues(result.error.issues, errors);
 
       return {
         errors: Object.values(errors),
@@ -55,10 +47,36 @@ export function toTypedSchema<
   return schema;
 }
 
+function processIssues(issues: ZodIssue[], errors: Record<string, TypedSchemaError>): void {
+  issues.forEach(issue => {
+    const path = joinPath(issue.path);
+    if (issue.code === 'invalid_union') {
+      processIssues(
+        issue.unionErrors.flatMap(ue => ue.issues),
+        errors
+      );
+
+      if (!path) {
+        return;
+      }
+    }
+
+    if (!errors[path]) {
+      errors[path] = { errors: [], path };
+    }
+
+    errors[path].errors.push(issue.message);
+  });
+}
+
 /**
  * Constructs a path with brackets to be compatible with vee-validate path syntax
  */
 function joinPath(path: (string | number)[]): string {
+  if (!path.length) {
+    return '';
+  }
+
   let fullPath = String(path[0]);
   for (let i = 1; i < path.length; i++) {
     if (isIndex(path[i])) {

packages/zod/tests/zod.spec.ts

@@ -2,16 +2,16 @@ import { useField, useForm } from '@/vee-validate';
 import { toTypedSchema } from '@/zod';
 import { mountWithHoc, flushPromises, setValue } from 'vee-validate/tests/helpers';
 import { Ref } from 'vue';
-import * as zod from 'zod';
+import { z } from 'zod';
 
 const REQUIRED_MSG = 'field is required';
 const MIN_MSG = 'field is too short';
 const EMAIL_MSG = 'field must be a valid email';
 
-test('validates typed field with yup', async () => {
+test('validates typed field with zod', async () => {
   const wrapper = mountWithHoc({
     setup() {
-      const rules = toTypedSchema(zod.string().min(1, REQUIRED_MSG).min(8, MIN_MSG));
+      const rules = toTypedSchema(z.string().min(1, REQUIRED_MSG).min(8, MIN_MSG));
       const { value, errorMessage } = useField('test', rules);
 
       return {
@@ -45,7 +45,7 @@ test('generates multiple errors for any given field', async () => {
   let errors!: Ref<string[]>;
   const wrapper = mountWithHoc({
     setup() {
-      const rules = toTypedSchema(zod.string().min(1, REQUIRED_MSG).min(8, MIN_MSG));
+      const rules = toTypedSchema(z.string().min(1, REQUIRED_MSG).min(8, MIN_MSG));
       const { value, errors: fieldErrors } = useField('test', rules);
 
       errors = fieldErrors;
@@ -72,9 +72,9 @@ test('shows multiple errors using error bag', async () => {
   const wrapper = mountWithHoc({
     setup() {
       const schema = toTypedSchema(
-        zod.object({
-          email: zod.string().email(EMAIL_MSG).min(7, MIN_MSG),
-          password: zod.string().min(8, MIN_MSG),
+        z.object({
+          email: z.string().email(EMAIL_MSG).min(7, MIN_MSG),
+          password: z.string().min(8, MIN_MSG),
         })
       );
 
@@ -125,13 +125,13 @@ test('shows multiple errors using error bag', async () => {
   expect(passwordError.textContent).toBe('');
 });
 
-test('validates typed schema form with yup', async () => {
+test('validates typed schema form with zod', async () => {
   const wrapper = mountWithHoc({
     setup() {
       const schema = toTypedSchema(
-        zod.object({
-          email: zod.string().email(EMAIL_MSG).min(1, REQUIRED_MSG),
-          password: zod.string().min(8, MIN_MSG),
+        z.object({
+          email: z.string().email(EMAIL_MSG).min(1, REQUIRED_MSG),
+          password: z.string().min(8, MIN_MSG),
         })
       );
 
@@ -182,13 +182,71 @@ test('validates typed schema form with yup', async () => {
   expect(passwordError.textContent).toBe('');
 });
 
+// #4204
+test('handles zod union errors', async () => {
+  const wrapper = mountWithHoc({
+    setup() {
+      const schema = z.object({
+        email: z.string().email({ message: 'valid email' }).min(1, 'Email is required'),
+        name: z.string().min(1, 'Name is required'),
+      });
+
+      const schemaBothUndefined = z.object({
+        email: z.undefined(),
+        name: z.undefined(),
+      });
+
+      const bothOrNeither = schema.or(schemaBothUndefined);
+
+      const { useFieldModel, errors } = useForm({
+        validationSchema: toTypedSchema(bothOrNeither),
+      });
+
+      const [email, name] = useFieldModel(['email', 'name']);
+
+      return {
+        schema,
+        email,
+        name,
+        errors,
+      };
+    },
+    template: `
+    <div>
+      <input id="email" name="email" v-model="email" />
+      <span id="emailErr">{{ errors.email }}</span>
+
+      <input id="name" name="name" v-model="name" />
+      <span id="nameErr">{{ errors.name }}</span>
+    </div>
+    `,
+  });
+
+  const email = wrapper.$el.querySelector('#email');
+  const name = wrapper.$el.querySelector('#name');
+  const emailError = wrapper.$el.querySelector('#emailErr');
+  const nameError = wrapper.$el.querySelector('#nameErr');
+
+  await flushPromises();
+
+  setValue(name, '4');
+  await flushPromises();
+  expect(nameError.textContent).toBe('Expected undefined, received string');
+
+  setValue(email, 'test@gmail.com');
+  await flushPromises();
+
+  expect(emailError.textContent).toBe('');
+  expect(nameError.textContent).toBe('');
+});
+
 test('uses zod for form values transformations and parsing', async () => {
   const submitSpy = vi.fn();
   mountWithHoc({
     setup() {
       const schema = toTypedSchema(
-        zod.object({
-          age: zod.preprocess(arg => Number(arg), zod.number()),
+        z.object({
+          age: z.preprocess(arg => Number(arg), z.number()),
         })
       );
 
@@ -223,8 +281,8 @@ test('uses zod default values for submission', async () => {
   mountWithHoc({
     setup() {
       const schema = toTypedSchema(
-        zod.object({
-          age: zod.number().default(11),
+        z.object({
+          age: z.number().default(11),
         })
       );
 
@@ -257,13 +315,13 @@ test('uses zod default values for initial values', async () => {
   mountWithHoc({
     setup() {
       const schema = toTypedSchema(
-        zod.object({
-          name: zod.string().default('test'),
-          age: zod.number().default(11),
-          unknownKey: zod.string(),
-          object: zod.object({
-            nestedKey: zod.string(),
-            nestedDefault: zod.string().default('nested'),
+        z.object({
+          name: z.string().default('test'),
+          age: z.number().default(11),
+          unknownKey: z.string(),
+          object: z.object({
+            nestedKey: z.string(),
+            nestedDefault: z.string().default('nested'),
           }),
         })
       );
@@ -301,8 +359,8 @@ test('default values should not be undefined', async () => {
   mountWithHoc({
     setup() {
       const schema = toTypedSchema(
-        zod.object({
-          email: zod.string().min(1),
+        z.object({
+          email: z.string().min(1),
         })
       );