pass Yup context to validationSchema using new prop validationSchemaC…

…ontext
jaredpalmer · Aug 1, 2023 · ccdcb39 · ccdcb39
1 parent b35b9ba
commit ccdcb39
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 2 deletions.
diff --git a/packages/formik/src/Formik.tsx b/packages/formik/src/Formik.tsx
@@ -235,8 +235,10 @@ export function useFormik<Values extends FormikValues = FormikValues>({
         : validationSchema;
       const promise =
         field && schema.validateAt
-          ? schema.validateAt(field, values)
-          : validateYupSchema(values, schema);
+          ? schema.validateAt(field, values, {
+            context: props.validationSchemaContext
+          })
+          : validateYupSchema(values, schema, false, props.validationSchemaContext);
       return new Promise((resolve, reject) => {
         promise.then(
           () => {

diff --git a/packages/formik/src/types.tsx b/packages/formik/src/types.tsx
@@ -223,6 +223,12 @@ export interface FormikConfig<Values> extends FormikSharedConfig {
     values: Values,
     formikHelpers: FormikHelpers<Values>
   ) => void | Promise<any>;
+
+  /**
+   * A context object to be passed to the Yup schema's `validate` method.
+   */
+  validationSchemaContext?: any;
+
   /**
    * A Yup Schema or a function that returns a Yup schema
    */

diff --git a/packages/formik/test/Formik.test.tsx b/packages/formik/test/Formik.test.tsx
@@ -1454,4 +1454,28 @@ describe('<Formik>', () => {
 
     expect(innerRef.current).toEqual(getProps());
   });
+
+  it('should pass context to validationSchema', async () => {
+    const validationSchema = Yup.object().shape({
+      usernameOrEmail: Yup.string().when(
+        '$validateAsEmail',
+        (validateAsEmail, schema) =>
+          validateAsEmail ? schema.email('Invalid email') : schema
+      ),
+    });
+
+    const { getProps } = renderFormik({
+      initialValues: { usernameOrEmail: 'john' },
+      validationSchema,
+      validationSchemaContext: { validateAsEmail: true },
+    });
+
+    await act(async () => {
+      await getProps().validateForm();
+    });
+
+    expect(getProps().errors).toEqual({
+      usernameOrEmail: 'Invalid email',
+    });
+  });
 });
diff --git a/packages/formik/test/yupHelpers.test.ts b/packages/formik/test/yupHelpers.test.ts
@@ -22,6 +22,12 @@ const deepNestedSchema = Yup.object({
   }),
 });
 
+const whenContextSchema = Yup.object().shape({
+  name: Yup.string().when('$isNameRequired', (isNameRequired, schema) => {
+    return isNameRequired ? schema.required('name is required') : schema;
+  }),
+});
+
 describe('Yup helpers', () => {
   describe('yupToFormErrors()', () => {
     it('should transform Yup ValidationErrors into an object', async () => {
@@ -109,5 +115,17 @@ describe('Yup helpers', () => {
         ]);
       }
     });
+
+    it('should provide context values as context to when method', async () => {
+      try {
+        await validateYupSchema({ name: '' }, whenContextSchema, false, {
+          isNameRequired: true,
+        });
+      } catch (e) {
+        const err = e as Yup.ValidationError;
+        expect(err.name).toEqual('ValidationError');
+        expect(err.errors).toEqual(['name is required']);
+      }
+    });
   });
 });