title: How to set dynamic error messages in Yup async validation?
body: <p>I am trying async validation in Formik using Yup's <code>.test()</code> method and need to set the error message that I get from the API. Error messages are going to be different based on some conditions in backend.</p>
  <p>Tried few solutions mentioned here<br />
  <a href="https://github.com/jquense/yup/issues/222" rel="noreferrer">https://github.com/jquense/yup/issues/222</a> and <a href="https://stackoverflow.com/questions/60154861/dynamic-validation-messages-using-yup-and-typescript">Dynamic Validation Messages Using Yup and Typescript</a></p>
  <p>But Yup is throwing the default error message given in <code>test()</code>.</p>
  <p>Documentation says that</p>
  <blockquote>
  <p>All tests must provide a name, an error message and a validation function that must return true or false or a ValidationError. To make a test async return a promise that resolves true or false or a ValidationError.</p>
  </blockquote>
  <p>I am resolving a new ValidationError with the error message but still, it throws the default error.</p>
  <p>Here is the code.</p>
  <pre><code>const schema = Yup.object().shape({
    email: Yup.string().test(
      &quot;email_async_validation&quot;,
      &quot;Email Validation Error&quot;, // YUP always throws this error
      value =&gt; {
        return new Promise((resolve, reject) =&gt; {
          emailValidationApi(value)
            .then(res =&gt; {
              const { message } = res.data; // I want this error message to be shown in form.
              resolve(new Yup.ValidationError(message));
            })
            .catch(e =&gt; {
              console.log(e);
            });
        });
      }
    )
  });
  </code></pre>