From ee97884a2e65d6e95aef04322eaa5bdcc5bdddad Mon Sep 17 00:00:00 2001
From: Zachary C Leighton <zachary.leighton@tipalti.com>
Date: Wed, 29 May 2024 17:05:07 +0300
Subject: [PATCH] test(i18n): undo describe scoping

Unwrapped the tests from the describe blocks, so the diff is cleaner.
Prefixed new tests names so they don't collide, also in commented section with begin/end.

#4726
---
 packages/i18n/tests/index.spec.ts | 1052 ++++++++++++++---------------
 1 file changed, 524 insertions(+), 528 deletions(-)

diff --git a/packages/i18n/tests/index.spec.ts b/packages/i18n/tests/index.spec.ts
index abbd0a8ad..4922fab48 100644
--- a/packages/i18n/tests/index.spec.ts
+++ b/packages/i18n/tests/index.spec.ts
@@ -4,29 +4,28 @@ import { required, between } from '@/rules';
 import { localize, setLocale } from '@/i18n';
 import { mountWithHoc, setValue, flushPromises } from '../../vee-validate/tests/helpers';
 
-describe('i18n', () => {
-  defineRule('required', required);
-  defineRule('between', between);
+defineRule('required', required);
+defineRule('between', between);
+
+beforeEach(() => {
+  localize('en', {
+    messages: {
+      required: 'The {field} is required',
+    },
+  });
+});
 
-  beforeEach(() => {
-    localize('en', {
+test('can define new locales', async () => {
+  configure({
+    generateMessage: localize('ar', {
       messages: {
-        required: 'The {field} is required',
+        required: 'هذا الحقل مطلوب',
       },
-    });
+    }),
   });
 
-  test('can define new locales', async () => {
-    configure({
-      generateMessage: localize('ar', {
-        messages: {
-          required: 'هذا الحقل مطلوب',
-        },
-      }),
-    });
-
-    const wrapper = mountWithHoc({
-      template: `
+  const wrapper = mountWithHoc({
+    template: `
       <div>
         <Field name="field" validateOnMount rules="required" v-slot="{ field, errors }">
           <input v-bind="field" type="text">
@@ -34,29 +33,29 @@ describe('i18n', () => {
         </Field>
       </div>
     `,
-    });
+  });
 
-    const error = wrapper.$el.querySelector('#error');
+  const error = wrapper.$el.querySelector('#error');
 
-    // flush the pending validation.
-    await flushPromises();
+  // flush the pending validation.
+  await flushPromises();
 
-    expect(error.textContent).toContain('هذا الحقل مطلوب');
-  });
+  expect(error.textContent).toContain('هذا الحقل مطلوب');
+});
 
-  test('can define specific messages for specific fields', async () => {
-    configure({
-      generateMessage: localize('en', {
-        fields: {
-          test: {
-            required: 'WRONG!',
-          },
+test('can define specific messages for specific fields', async () => {
+  configure({
+    generateMessage: localize('en', {
+      fields: {
+        test: {
+          required: 'WRONG!',
         },
-      }),
-    });
+      },
+    }),
+  });
 
-    const wrapper = mountWithHoc({
-      template: `
+  const wrapper = mountWithHoc({
+    template: `
         <div>
           <Field name="test" :validateOnMount="true" rules="required" v-slot="{ field, errors }">
             <input v-bind="field" type="text">
@@ -69,30 +68,30 @@ describe('i18n', () => {
           </Field>
         </div>
       `,
-    });
+  });
 
-    await flushPromises();
-    const errors = wrapper.$el.querySelectorAll('.error');
-    expect(errors).toHaveLength(2);
+  await flushPromises();
+  const errors = wrapper.$el.querySelectorAll('.error');
+  expect(errors).toHaveLength(2);
 
-    expect(errors[0].textContent).toContain('WRONG!');
-    expect(errors[1].textContent).toContain('The name is required');
-  });
+  expect(errors[0].textContent).toContain('WRONG!');
+  expect(errors[1].textContent).toContain('The name is required');
+});
 
-  // #4097
-  test('can define specific messages for specific fields with labels', async () => {
-    configure({
-      generateMessage: localize('en', {
-        fields: {
-          test: {
-            required: '{field} WRONG!',
-          },
+// #4097
+test('can define specific messages for specific fields with labels', async () => {
+  configure({
+    generateMessage: localize('en', {
+      fields: {
+        test: {
+          required: '{field} WRONG!',
         },
-      }),
-    });
+      },
+    }),
+  });
 
-    const wrapper = mountWithHoc({
-      template: `
+  const wrapper = mountWithHoc({
+    template: `
         <div>
           <Field name="test" :validateOnMount="true" rules="required" v-slot="{ field, errors }" label="field">
             <input v-bind="field" type="text">
@@ -105,30 +104,30 @@ describe('i18n', () => {
           </Field>
         </div>
       `,
-    });
+  });
 
-    await flushPromises();
-    const errors = wrapper.$el.querySelectorAll('.error');
-    expect(errors).toHaveLength(2);
+  await flushPromises();
+  const errors = wrapper.$el.querySelectorAll('.error');
+  expect(errors).toHaveLength(2);
 
-    expect(errors[0].textContent).toContain('field WRONG!');
-    expect(errors[1].textContent).toContain('The name is required');
-  });
+  expect(errors[0].textContent).toContain('field WRONG!');
+  expect(errors[1].textContent).toContain('The name is required');
+});
 
-  // #4097
-  test('can define specific messages for specific fields with labels and form schema', async () => {
-    configure({
-      generateMessage: localize('en', {
-        fields: {
-          test: {
-            required: '{field} WRONG!',
-          },
+// #4097
+test('can define specific messages for specific fields with labels and form schema', async () => {
+  configure({
+    generateMessage: localize('en', {
+      fields: {
+        test: {
+          required: '{field} WRONG!',
         },
-      }),
-    });
+      },
+    }),
+  });
 
-    const wrapper = mountWithHoc({
-      template: `
+  const wrapper = mountWithHoc({
+    template: `
         <VForm :validation-schema="schema">
           <Field name="test" :validateOnMount="true" v-slot="{ field, errors }" label="field">
             <input v-bind="field" type="text">
@@ -141,37 +140,37 @@ describe('i18n', () => {
           </Field>
         </VForm>
       `,
-      setup() {
-        return {
-          schema: {
-            test: 'required',
-            name: 'required',
-          },
-        };
-      },
-    });
+    setup() {
+      return {
+        schema: {
+          test: 'required',
+          name: 'required',
+        },
+      };
+    },
+  });
 
-    await flushPromises();
-    const errors = wrapper.$el.querySelectorAll('.error');
-    expect(errors).toHaveLength(2);
+  await flushPromises();
+  const errors = wrapper.$el.querySelectorAll('.error');
+  expect(errors).toHaveLength(2);
 
-    expect(errors[0].textContent).toContain('field WRONG!');
-    expect(errors[1].textContent).toContain('The name is required');
-  });
+  expect(errors[0].textContent).toContain('field WRONG!');
+  expect(errors[1].textContent).toContain('The name is required');
+});
 
-  test('can define labels or names for fields', async () => {
-    configure({
-      generateMessage: localize('en', {
-        messages: { required: '{field} is required' },
-        names: {
-          first: 'First test',
-          second: 'Second test',
-        },
-      }),
-    });
+test('can define labels or names for fields', async () => {
+  configure({
+    generateMessage: localize('en', {
+      messages: { required: '{field} is required' },
+      names: {
+        first: 'First test',
+        second: 'Second test',
+      },
+    }),
+  });
 
-    const wrapper = mountWithHoc({
-      template: `
+  const wrapper = mountWithHoc({
+    template: `
         <div>
           <Field name="first" :validateOnMount="true" rules="required" v-slot="{ field, errors }">
             <input v-bind="field" type="text">
@@ -184,29 +183,29 @@ describe('i18n', () => {
           </Field>
         </div>
       `,
-    });
+  });
 
-    await flushPromises();
-    const errors = wrapper.$el.querySelectorAll('.error');
-    expect(errors).toHaveLength(2);
+  await flushPromises();
+  const errors = wrapper.$el.querySelectorAll('.error');
+  expect(errors).toHaveLength(2);
 
-    expect(errors[0].textContent).toContain('First test is required');
-    expect(errors[1].textContent).toContain('Second test is required');
-  });
+  expect(errors[0].textContent).toContain('First test is required');
+  expect(errors[1].textContent).toContain('Second test is required');
+});
 
-  test('can define localized labels for fields', async () => {
-    configure({
-      generateMessage: localize('en', {
-        messages: { required: '{field} is required' },
-        names: {
-          first: 'First test',
-          second: 'Second test',
-        },
-      }),
-    });
+test('can define localized labels for fields', async () => {
+  configure({
+    generateMessage: localize('en', {
+      messages: { required: '{field} is required' },
+      names: {
+        first: 'First test',
+        second: 'Second test',
+      },
+    }),
+  });
 
-    const wrapper = mountWithHoc({
-      template: `
+  const wrapper = mountWithHoc({
+    template: `
         <div>
           <Field name="first.value" label="first" :validateOnMount="true" rules="required" v-slot="{ field, errors }">
             <input v-bind="field" type="text">
@@ -219,57 +218,57 @@ describe('i18n', () => {
           </Field>
         </div>
       `,
-    });
-
-    await flushPromises();
-    const errors = wrapper.$el.querySelectorAll('.error');
-    expect(errors).toHaveLength(2);
-
-    expect(errors[0].textContent).toContain('First test is required');
-    expect(errors[1].textContent).toContain('Second test is required');
   });
 
-  // #4164
-  test('can define labels or names for fields with useField', async () => {
-    let errorMessage!: Ref<string | undefined>;
-    configure({
-      generateMessage: localize('en', {
-        messages: { required: '{field} is required' },
-        names: {
-          first: 'First test',
-          second: 'Second test',
-        },
-      }),
-    });
+  await flushPromises();
+  const errors = wrapper.$el.querySelectorAll('.error');
+  expect(errors).toHaveLength(2);
+
+  expect(errors[0].textContent).toContain('First test is required');
+  expect(errors[1].textContent).toContain('Second test is required');
+});
 
-    mountWithHoc({
-      setup() {
-        const field = useField('first', 'required', { validateOnMount: true });
-        errorMessage = field.errorMessage;
+// #4164
+test('can define labels or names for fields with useField', async () => {
+  let errorMessage!: Ref<string | undefined>;
+  configure({
+    generateMessage: localize('en', {
+      messages: { required: '{field} is required' },
+      names: {
+        first: 'First test',
+        second: 'Second test',
       },
-      template: `
+    }),
+  });
+
+  mountWithHoc({
+    setup() {
+      const field = useField('first', 'required', { validateOnMount: true });
+      errorMessage = field.errorMessage;
+    },
+    template: `
         <div>
         </div>
       `,
-    });
-
-    await flushPromises();
-    expect(errorMessage.value).toBe('First test is required');
   });
 
-  test('can merge locales without setting the current one', async () => {
-    configure({
-      generateMessage: localize({
-        ar: {
-          messages: {
-            required: 'هذا الحقل مطلوب',
-          },
+  await flushPromises();
+  expect(errorMessage.value).toBe('First test is required');
+});
+
+test('can merge locales without setting the current one', async () => {
+  configure({
+    generateMessage: localize({
+      ar: {
+        messages: {
+          required: 'هذا الحقل مطلوب',
         },
-      }),
-    });
+      },
+    }),
+  });
 
-    const wrapper = mountWithHoc({
-      template: `
+  const wrapper = mountWithHoc({
+    template: `
         <div>
           <Field name="field" :validateOnMount="true" rules="required" v-slot="{ field, errors }">
             <input v-bind="field" type="text">
@@ -277,21 +276,21 @@ describe('i18n', () => {
           </Field>
         </div>
       `,
-    });
+  });
 
-    const error = wrapper.$el.querySelector('#error');
-    // flush the pending validation.
-    await flushPromises();
+  const error = wrapper.$el.querySelector('#error');
+  // flush the pending validation.
+  await flushPromises();
 
-    // locale wasn't set.
-    expect(error.textContent).toContain('The field is required');
-  });
+  // locale wasn't set.
+  expect(error.textContent).toContain('The field is required');
+});
 
-  test('falls back to the default message if rule without message exists', async () => {
-    defineRule('i18n', () => false);
+test('falls back to the default message if rule without message exists', async () => {
+  defineRule('i18n', () => false);
 
-    const wrapper = mountWithHoc({
-      template: `
+  const wrapper = mountWithHoc({
+    template: `
       <div>
         <Field name="name" rules="required|i18n" v-slot="{ field, errors }">
           <input v-bind="field" type="text">
@@ -299,29 +298,29 @@ describe('i18n', () => {
         </Field>
       </div>
     `,
-    });
+  });
 
-    const error = wrapper.$el.querySelector('#error');
-    const input = wrapper.$el.querySelector('input');
-    setValue(input, '12');
-    await flushPromises();
+  const error = wrapper.$el.querySelector('#error');
+  const input = wrapper.$el.querySelector('input');
+  setValue(input, '12');
+  await flushPromises();
 
-    expect(error.textContent).toContain('name is not valid');
-  });
+  expect(error.textContent).toContain('name is not valid');
+});
 
-  test('falls back to a language specific default message if rule without message exists', async () => {
-    defineRule('i18n', () => false);
-    configure({
-      generateMessage: localize('nl', {
-        messages: {
-          _default: '{field} is ongeldig',
-        },
-      }),
-    });
-    setLocale('nl');
+test('falls back to a language specific default message if rule without message exists', async () => {
+  defineRule('i18n', () => false);
+  configure({
+    generateMessage: localize('nl', {
+      messages: {
+        _default: '{field} is ongeldig',
+      },
+    }),
+  });
+  setLocale('nl');
 
-    const wrapper = mountWithHoc({
-      template: `
+  const wrapper = mountWithHoc({
+    template: `
       <div>
         <Field name="field" rules="required|i18n" v-slot="{ field, errors }">
           <input v-bind="field" type="text">
@@ -329,36 +328,36 @@ describe('i18n', () => {
         </Field>
       </div>
     `,
-    });
+  });
 
-    const error = wrapper.$el.querySelector('#error');
-    const input = wrapper.$el.querySelector('input');
-    setValue(input, '12');
-    await flushPromises();
+  const error = wrapper.$el.querySelector('#error');
+  const input = wrapper.$el.querySelector('input');
+  setValue(input, '12');
+  await flushPromises();
 
-    expect(error.textContent).toContain('field is ongeldig');
-  });
+  expect(error.textContent).toContain('field is ongeldig');
+});
 
-  test('can switch between locales with setLocale', async () => {
-    configure({
-      generateMessage: localize({
-        en: {
-          messages: {
-            required: 'This field is required',
-          },
+test('can switch between locales with setLocale', async () => {
+  configure({
+    generateMessage: localize({
+      en: {
+        messages: {
+          required: 'This field is required',
         },
-        ar: {
-          messages: {
-            required: 'هذا الحقل مطلوب',
-          },
+      },
+      ar: {
+        messages: {
+          required: 'هذا الحقل مطلوب',
         },
-      }),
-    });
+      },
+    }),
+  });
 
-    setLocale('en');
+  setLocale('en');
 
-    const wrapper = mountWithHoc({
-      template: `
+  const wrapper = mountWithHoc({
+    template: `
       <div>
         <Field name="field" validateOnMount rules="required" v-slot="{ field, errors }">
           <input v-bind="field" type="text">
@@ -366,32 +365,32 @@ describe('i18n', () => {
         </Field>
       </div>
     `,
-    });
+  });
 
-    const error = wrapper.$el.querySelector('#error');
+  const error = wrapper.$el.querySelector('#error');
 
-    // flush the pending validation.
-    await flushPromises();
+  // flush the pending validation.
+  await flushPromises();
 
-    expect(error.textContent).toContain('This field is required');
-    setLocale('ar');
-    setValue(wrapper.$el.querySelector('input'), '');
+  expect(error.textContent).toContain('This field is required');
+  setLocale('ar');
+  setValue(wrapper.$el.querySelector('input'), '');
 
-    await flushPromises();
-    expect(error.textContent).toContain('هذا الحقل مطلوب');
+  await flushPromises();
+  expect(error.textContent).toContain('هذا الحقل مطلوب');
+});
+
+test('interpolates object params with short format', async () => {
+  configure({
+    generateMessage: localize('en', {
+      messages: {
+        between: `The {field} field must be between {min} and {max}`,
+      },
+    }),
   });
-  describe('default interpolation', () => {
-    test('interpolates object params with short format', async () => {
-      configure({
-        generateMessage: localize('en', {
-          messages: {
-            between: `The {field} field must be between {min} and {max}`,
-          },
-        }),
-      });
 
-      const wrapper = mountWithHoc({
-        template: `
+  const wrapper = mountWithHoc({
+    template: `
         <div>
           <Field name="name" value="-1" :validateOnMount="true" :rules="{ between: { min: 1, max: 10 } }" v-slot="{ field, errors }">
             <input v-bind="field" type="text">
@@ -399,27 +398,27 @@ describe('i18n', () => {
           </Field>
         </div>
       `,
-      });
+  });
 
-      const error = wrapper.$el.querySelector('#error');
-      // flush the pending validation.
-      await flushPromises();
+  const error = wrapper.$el.querySelector('#error');
+  // flush the pending validation.
+  await flushPromises();
 
-      // locale wasn't set.
-      expect(error.textContent).toContain('The name field must be between 1 and 10');
-    });
+  // locale wasn't set.
+  expect(error.textContent).toContain('The name field must be between 1 and 10');
+});
 
-    test('interpolates object params with extended format', async () => {
-      configure({
-        generateMessage: localize('en', {
-          messages: {
-            between: `The {field} field must be between 0:{min} and 1:{max}`,
-          },
-        }),
-      });
+test('interpolates object params with extended format', async () => {
+  configure({
+    generateMessage: localize('en', {
+      messages: {
+        between: `The {field} field must be between 0:{min} and 1:{max}`,
+      },
+    }),
+  });
 
-      const wrapper = mountWithHoc({
-        template: `
+  const wrapper = mountWithHoc({
+    template: `
         <div>
           <Field name="name" value="-1" :validateOnMount="true" :rules="{ between: { min: 1, max: 10 } }" v-slot="{ field, errors }">
             <input v-bind="field" type="text">
@@ -427,27 +426,27 @@ describe('i18n', () => {
           </Field>
         </div>
       `,
-      });
+  });
 
-      const error = wrapper.$el.querySelector('#error');
-      // flush the pending validation.
-      await flushPromises();
+  const error = wrapper.$el.querySelector('#error');
+  // flush the pending validation.
+  await flushPromises();
 
-      // locale wasn't set.
-      expect(error.textContent).toContain('The name field must be between 1 and 10');
-    });
+  // locale wasn't set.
+  expect(error.textContent).toContain('The name field must be between 1 and 10');
+});
 
-    test('interpolates array params', async () => {
-      configure({
-        generateMessage: localize('en', {
-          messages: {
-            between: 'The {field} field must be between 0:{min} and 1:{max}',
-          },
-        }),
-      });
+test('interpolates array params', async () => {
+  configure({
+    generateMessage: localize('en', {
+      messages: {
+        between: 'The {field} field must be between 0:{min} and 1:{max}',
+      },
+    }),
+  });
 
-      const wrapper = mountWithHoc({
-        template: `
+  const wrapper = mountWithHoc({
+    template: `
         <div>
           <Field name="name" value="-1" :validateOnMount="true" :rules="{ between: [1, 10] }" v-slot="{ field, errors }">
             <input v-bind="field" type="text">
@@ -455,27 +454,27 @@ describe('i18n', () => {
           </Field>
         </div>
       `,
-      });
+  });
 
-      const error = wrapper.$el.querySelector('#error');
-      // flush the pending validation.
-      await flushPromises();
+  const error = wrapper.$el.querySelector('#error');
+  // flush the pending validation.
+  await flushPromises();
 
-      // locale wasn't set.
-      expect(error.textContent).toContain('The name field must be between 1 and 10');
-    });
+  // locale wasn't set.
+  expect(error.textContent).toContain('The name field must be between 1 and 10');
+});
 
-    test('interpolates string params', async () => {
-      configure({
-        generateMessage: localize('en', {
-          messages: {
-            between: 'The {field} field must be between 0:{min} and 1:{max}',
-          },
-        }),
-      });
+test('interpolates string params', async () => {
+  configure({
+    generateMessage: localize('en', {
+      messages: {
+        between: 'The {field} field must be between 0:{min} and 1:{max}',
+      },
+    }),
+  });
 
-      const wrapper = mountWithHoc({
-        template: `
+  const wrapper = mountWithHoc({
+    template: `
         <div>
           <Field name="name" value="-1" :validateOnMount="true" rules="between:1,10" v-slot="{ field, errors }">
             <input v-bind="field" type="text">
@@ -483,28 +482,28 @@ describe('i18n', () => {
           </Field>
         </div>
       `,
-      });
+  });
 
-      const error = wrapper.$el.querySelector('#error');
-      // flush the pending validation.
-      await flushPromises();
+  const error = wrapper.$el.querySelector('#error');
+  // flush the pending validation.
+  await flushPromises();
+
+  // locale wasn't set.
+  expect(error.textContent).toContain('The name field must be between 1 and 10');
+});
 
-      // locale wasn't set.
-      expect(error.textContent).toContain('The name field must be between 1 and 10');
+describe('interpolation preserves placeholders if not found', () => {
+  test('array format', async () => {
+    configure({
+      generateMessage: localize('en', {
+        messages: {
+          between: 'The {field} field must be between 0:{min} and 1:{max}',
+        },
+      }),
     });
 
-    describe('interpolation preserves placeholders if not found', () => {
-      test('array format', async () => {
-        configure({
-          generateMessage: localize('en', {
-            messages: {
-              between: 'The {field} field must be between 0:{min} and 1:{max}',
-            },
-          }),
-        });
-
-        const wrapper = mountWithHoc({
-          template: `
+    const wrapper = mountWithHoc({
+      template: `
         <div>
           <Field name="name" value="-1" :validateOnMount="true" :rules="{ between: [1] }" v-slot="{ field, errors }">
             <input v-bind="field" type="text">
@@ -512,27 +511,27 @@ describe('i18n', () => {
           </Field>
         </div>
       `,
-        });
-
-        const error = wrapper.$el.querySelector('#error');
-        // flush the pending validation.
-        await flushPromises();
-
-        // locale wasn't set.
-        expect(error.textContent).toContain('The name field must be between 1 and 1:{max}');
-      });
-
-      test('object format', async () => {
-        configure({
-          generateMessage: localize('en', {
-            messages: {
-              between: 'The {field} field must be between 0:{min} and 1:{max}',
-            },
-          }),
-        });
-
-        const wrapper = mountWithHoc({
-          template: `
+    });
+
+    const error = wrapper.$el.querySelector('#error');
+    // flush the pending validation.
+    await flushPromises();
+
+    // locale wasn't set.
+    expect(error.textContent).toContain('The name field must be between 1 and 1:{max}');
+  });
+
+  test('object format', async () => {
+    configure({
+      generateMessage: localize('en', {
+        messages: {
+          between: 'The {field} field must be between 0:{min} and 1:{max}',
+        },
+      }),
+    });
+
+    const wrapper = mountWithHoc({
+      template: `
         <div>
           <Field name="name" value="-1" :validateOnMount="true" :rules="{ between: { min: 0 } }" v-slot="{ field, errors }">
             <input v-bind="field" type="text">
@@ -540,37 +539,36 @@ describe('i18n', () => {
           </Field>
         </div>
       `,
-        });
+    });
 
-        const error = wrapper.$el.querySelector('#error');
-        // flush the pending validation.
-        await flushPromises();
+    const error = wrapper.$el.querySelector('#error');
+    // flush the pending validation.
+    await flushPromises();
 
-        // locale wasn't set.
-        expect(error.textContent).toContain('The name field must be between 0 and {max}');
-      });
-    });
+    // locale wasn't set.
+    expect(error.textContent).toContain('The name field must be between 0 and {max}');
+  });
+});
+
+// begin - #4726 - custom interpolation options
+test('custom interpolation options - interpolates object params with short format', async () => {
+  configure({
+    generateMessage: localize(
+      'en',
+      {
+        messages: {
+          between: `The {{field}} field must be between {{min}} and {{max}}`,
+        },
+      },
+      {
+        prefix: '{{',
+        suffix: '}}',
+      },
+    ),
+  });
 
-    // #4726
-    describe('custom interpolation options', () => {
-      test('interpolates object params with short format', async () => {
-        configure({
-          generateMessage: localize(
-            'en',
-            {
-              messages: {
-                between: `The {{field}} field must be between {{min}} and {{max}}`,
-              },
-            },
-            {
-              prefix: '{{',
-              suffix: '}}',
-            },
-          ),
-        });
-
-        const wrapper = mountWithHoc({
-          template: `
+  const wrapper = mountWithHoc({
+    template: `
         <div>
           <Field name="name" value="-1" :validateOnMount="true" :rules="{ between: { min: 1, max: 10 } }" v-slot="{ field, errors }">
             <input v-bind="field" type="text">
@@ -578,34 +576,34 @@ describe('i18n', () => {
           </Field>
         </div>
       `,
-        });
-
-        const error = wrapper.$el.querySelector('#error');
-        // flush the pending validation.
-        await flushPromises();
-
-        // locale wasn't set.
-        expect(error.textContent).toContain('The name field must be between 1 and 10');
-      });
-
-      test('interpolates object params with short format and handlebars style interpolation', async () => {
-        configure({
-          generateMessage: localize(
-            'en',
-            {
-              messages: {
-                between: `The <%field%> field must be between <%min%> and <%max%>`,
-              },
-            },
-            {
-              prefix: '<%',
-              suffix: '%>',
-            },
-          ),
-        });
-
-        const wrapper = mountWithHoc({
-          template: `
+  });
+
+  const error = wrapper.$el.querySelector('#error');
+  // flush the pending validation.
+  await flushPromises();
+
+  // locale wasn't set.
+  expect(error.textContent).toContain('The name field must be between 1 and 10');
+});
+
+test('custom interpolation options - interpolates object params with short format and handlebars style interpolation', async () => {
+  configure({
+    generateMessage: localize(
+      'en',
+      {
+        messages: {
+          between: `The <%field%> field must be between <%min%> and <%max%>`,
+        },
+      },
+      {
+        prefix: '<%',
+        suffix: '%>',
+      },
+    ),
+  });
+
+  const wrapper = mountWithHoc({
+    template: `
         <div>
           <Field name="name" value="-1" :validateOnMount="true" :rules="{ between: { min: 1, max: 10 } }" v-slot="{ field, errors }">
             <input v-bind="field" type="text">
@@ -613,34 +611,34 @@ describe('i18n', () => {
           </Field>
         </div>
       `,
-        });
-
-        const error = wrapper.$el.querySelector('#error');
-        // flush the pending validation.
-        await flushPromises();
-
-        // locale wasn't set.
-        expect(error.textContent).toContain('The name field must be between 1 and 10');
-      });
-
-      test('interpolates object params with extended format', async () => {
-        configure({
-          generateMessage: localize(
-            'en',
-            {
-              messages: {
-                between: `The {{field}} field must be between 0:{{min}} and 1:{{max}}`,
-              },
-            },
-            {
-              prefix: '{{',
-              suffix: '}}',
-            },
-          ),
-        });
-
-        const wrapper = mountWithHoc({
-          template: `
+  });
+
+  const error = wrapper.$el.querySelector('#error');
+  // flush the pending validation.
+  await flushPromises();
+
+  // locale wasn't set.
+  expect(error.textContent).toContain('The name field must be between 1 and 10');
+});
+
+test('custom interpolation options - interpolates object params with extended format', async () => {
+  configure({
+    generateMessage: localize(
+      'en',
+      {
+        messages: {
+          between: `The {{field}} field must be between 0:{{min}} and 1:{{max}}`,
+        },
+      },
+      {
+        prefix: '{{',
+        suffix: '}}',
+      },
+    ),
+  });
+
+  const wrapper = mountWithHoc({
+    template: `
         <div>
           <Field name="name" value="-1" :validateOnMount="true" :rules="{ between: { min: 1, max: 10 } }" v-slot="{ field, errors }">
             <input v-bind="field" type="text">
@@ -648,34 +646,34 @@ describe('i18n', () => {
           </Field>
         </div>
       `,
-        });
-
-        const error = wrapper.$el.querySelector('#error');
-        // flush the pending validation.
-        await flushPromises();
-
-        // locale wasn't set.
-        expect(error.textContent).toContain('The name field must be between 1 and 10');
-      });
-
-      test('interpolates array params', async () => {
-        configure({
-          generateMessage: localize(
-            'en',
-            {
-              messages: {
-                between: 'The {{field}} field must be between 0:{{min}} and 1:{{max}}',
-              },
-            },
-            {
-              prefix: '{{',
-              suffix: '}}',
-            },
-          ),
-        });
-
-        const wrapper = mountWithHoc({
-          template: `
+  });
+
+  const error = wrapper.$el.querySelector('#error');
+  // flush the pending validation.
+  await flushPromises();
+
+  // locale wasn't set.
+  expect(error.textContent).toContain('The name field must be between 1 and 10');
+});
+
+test('custom interpolation options - interpolates array params', async () => {
+  configure({
+    generateMessage: localize(
+      'en',
+      {
+        messages: {
+          between: 'The {{field}} field must be between 0:{{min}} and 1:{{max}}',
+        },
+      },
+      {
+        prefix: '{{',
+        suffix: '}}',
+      },
+    ),
+  });
+
+  const wrapper = mountWithHoc({
+    template: `
         <div>
           <Field name="name" value="-1" :validateOnMount="true" :rules="{ between: [1, 10] }" v-slot="{ field, errors }">
             <input v-bind="field" type="text">
@@ -683,34 +681,34 @@ describe('i18n', () => {
           </Field>
         </div>
       `,
-        });
-
-        const error = wrapper.$el.querySelector('#error');
-        // flush the pending validation.
-        await flushPromises();
-
-        // locale wasn't set.
-        expect(error.textContent).toContain('The name field must be between 1 and 10');
-      });
-
-      test('interpolates string params', async () => {
-        configure({
-          generateMessage: localize(
-            'en',
-            {
-              messages: {
-                between: 'The {{field}} field must be between 0:{{min}} and 1:{{max}}',
-              },
-            },
-            {
-              prefix: '{{',
-              suffix: '}}',
-            },
-          ),
-        });
-
-        const wrapper = mountWithHoc({
-          template: `
+  });
+
+  const error = wrapper.$el.querySelector('#error');
+  // flush the pending validation.
+  await flushPromises();
+
+  // locale wasn't set.
+  expect(error.textContent).toContain('The name field must be between 1 and 10');
+});
+
+test('custom interpolation options - interpolates string params', async () => {
+  configure({
+    generateMessage: localize(
+      'en',
+      {
+        messages: {
+          between: 'The {{field}} field must be between 0:{{min}} and 1:{{max}}',
+        },
+      },
+      {
+        prefix: '{{',
+        suffix: '}}',
+      },
+    ),
+  });
+
+  const wrapper = mountWithHoc({
+    template: `
         <div>
           <Field name="name" value="-1" :validateOnMount="true" rules="between:1,10" v-slot="{ field, errors }">
             <input v-bind="field" type="text">
@@ -718,35 +716,35 @@ describe('i18n', () => {
           </Field>
         </div>
       `,
-        });
-
-        const error = wrapper.$el.querySelector('#error');
-        // flush the pending validation.
-        await flushPromises();
-
-        // locale wasn't set.
-        expect(error.textContent).toContain('The name field must be between 1 and 10');
-      });
-
-      describe('interpolation preserves placeholders if not found', () => {
-        test('array format', async () => {
-          configure({
-            generateMessage: localize(
-              'en',
-              {
-                messages: {
-                  between: 'The {{field}} field must be between 0:{{min}} and 1:{{max}}',
-                },
-              },
-              {
-                prefix: '{{',
-                suffix: '}}',
-              },
-            ),
-          });
-
-          const wrapper = mountWithHoc({
-            template: `
+  });
+
+  const error = wrapper.$el.querySelector('#error');
+  // flush the pending validation.
+  await flushPromises();
+
+  // locale wasn't set.
+  expect(error.textContent).toContain('The name field must be between 1 and 10');
+});
+
+describe('interpolation preserves placeholders if not found', () => {
+  test('custom interpolation options - array format', async () => {
+    configure({
+      generateMessage: localize(
+        'en',
+        {
+          messages: {
+            between: 'The {{field}} field must be between 0:{{min}} and 1:{{max}}',
+          },
+        },
+        {
+          prefix: '{{',
+          suffix: '}}',
+        },
+      ),
+    });
+
+    const wrapper = mountWithHoc({
+      template: `
         <div>
           <Field name="name" value="-1" :validateOnMount="true" :rules="{ between: [1] }" v-slot="{ field, errors }">
             <input v-bind="field" type="text">
@@ -754,34 +752,34 @@ describe('i18n', () => {
           </Field>
         </div>
       `,
-          });
-
-          const error = wrapper.$el.querySelector('#error');
-          // flush the pending validation.
-          await flushPromises();
-
-          // locale wasn't set.
-          expect(error.textContent).toContain('The name field must be between 1 and 1:{{max}}');
-        });
-
-        test('object format', async () => {
-          configure({
-            generateMessage: localize(
-              'en',
-              {
-                messages: {
-                  between: 'The {{field}} field must be between 0:{{min}} and 1:{{max}}',
-                },
-              },
-              {
-                prefix: '{{',
-                suffix: '}}',
-              },
-            ),
-          });
-
-          const wrapper = mountWithHoc({
-            template: `
+    });
+
+    const error = wrapper.$el.querySelector('#error');
+    // flush the pending validation.
+    await flushPromises();
+
+    // locale wasn't set.
+    expect(error.textContent).toContain('The name field must be between 1 and 1:{{max}}');
+  });
+
+  test('custom interpolation options - object format', async () => {
+    configure({
+      generateMessage: localize(
+        'en',
+        {
+          messages: {
+            between: 'The {{field}} field must be between 0:{{min}} and 1:{{max}}',
+          },
+        },
+        {
+          prefix: '{{',
+          suffix: '}}',
+        },
+      ),
+    });
+
+    const wrapper = mountWithHoc({
+      template: `
         <div>
           <Field name="name" value="-1" :validateOnMount="true" :rules="{ between: { min: 0 } }" v-slot="{ field, errors }">
             <input v-bind="field" type="text">
@@ -789,16 +787,14 @@ describe('i18n', () => {
           </Field>
         </div>
       `,
-          });
+    });
 
-          const error = wrapper.$el.querySelector('#error');
-          // flush the pending validation.
-          await flushPromises();
+    const error = wrapper.$el.querySelector('#error');
+    // flush the pending validation.
+    await flushPromises();
 
-          // locale wasn't set.
-          expect(error.textContent).toContain('The name field must be between 0 and {{max}}');
-        });
-      });
-    });
+    // locale wasn't set.
+    expect(error.textContent).toContain('The name field must be between 0 and {{max}}');
   });
 });
+// end - #4726 - custom interpolation options tests