@hookform/resolvers 2.8.1

package/yup/src/__tests__/Form-native-validation.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { render, screen, act } from '@testing-library/react';
+import user from '@testing-library/user-event';
+import { useForm } from 'react-hook-form';
+import * as Yup from 'yup';
+import { yupResolver } from '..';
+
+const USERNAME_REQUIRED_MESSAGE = 'username field is required';
+const PASSWORD_REQUIRED_MESSAGE = 'password field is required';
+
+const schema = Yup.object({
+  username: Yup.string().required(USERNAME_REQUIRED_MESSAGE),
+  password: Yup.string().required(PASSWORD_REQUIRED_MESSAGE),
+});
+
+type FormData = Yup.InferType<typeof schema>;
+
+interface Props {
+  onSubmit: (data: FormData) => void;
+}
+
+function TestComponent({ onSubmit }: Props) {
+  const { register, handleSubmit } = useForm({
+    resolver: yupResolver(schema),
+    shouldUseNativeValidation: true,
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input {...register('username')} placeholder="username" />
+
+      <input {...register('password')} placeholder="password" />
+
+      <button type="submit">submit</button>
+    </form>
+  );
+}
+
+test("form's native validation with Yup", async () => {
+  const handleSubmit = jest.fn();
+  render(<TestComponent onSubmit={handleSubmit} />);
+
+  // username
+  let usernameField = screen.getByPlaceholderText(
+    /username/i,
+  ) as HTMLInputElement;
+  expect(usernameField.validity.valid).toBe(true);
+  expect(usernameField.validationMessage).toBe('');
+
+  // password
+  let passwordField = screen.getByPlaceholderText(
+    /password/i,
+  ) as HTMLInputElement;
+  expect(passwordField.validity.valid).toBe(true);
+  expect(passwordField.validationMessage).toBe('');
+
+  await act(async () => {
+    user.click(screen.getByText(/submit/i));
+  });
+
+  // username
+  usernameField = screen.getByPlaceholderText(/username/i) as HTMLInputElement;
+  expect(usernameField.validity.valid).toBe(false);
+  expect(usernameField.validationMessage).toBe(USERNAME_REQUIRED_MESSAGE);
+
+  // password
+  passwordField = screen.getByPlaceholderText(/password/i) as HTMLInputElement;
+  expect(passwordField.validity.valid).toBe(false);
+  expect(passwordField.validationMessage).toBe(PASSWORD_REQUIRED_MESSAGE);
+
+  await act(async () => {
+    user.type(screen.getByPlaceholderText(/username/i), 'joe');
+    user.type(screen.getByPlaceholderText(/password/i), 'password');
+  });
+
+  // username
+  usernameField = screen.getByPlaceholderText(/username/i) as HTMLInputElement;
+  expect(usernameField.validity.valid).toBe(true);
+  expect(usernameField.validationMessage).toBe('');
+
+  // password
+  passwordField = screen.getByPlaceholderText(/password/i) as HTMLInputElement;
+  expect(passwordField.validity.valid).toBe(true);
+  expect(passwordField.validationMessage).toBe('');
+});

package/yup/src/__tests__/Form.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render, screen, act } from '@testing-library/react';
+import user from '@testing-library/user-event';
+import { useForm } from 'react-hook-form';
+import * as Yup from 'yup';
+import { yupResolver } from '..';
+
+const schema = Yup.object({
+  username: Yup.string().required(),
+  password: Yup.string().required(),
+});
+
+type FormData = Yup.InferType<typeof schema> & { unusedProperty: string };
+
+interface Props {
+  onSubmit: (data: FormData) => void;
+}
+
+function TestComponent({ onSubmit }: Props) {
+  const {
+    register,
+    formState: { errors },
+    handleSubmit,
+  } = useForm({
+    resolver: yupResolver(schema), // Useful to check TypeScript regressions
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input {...register('username')} />
+      {errors.username && <span role="alert">{errors.username.message}</span>}
+
+      <input {...register('password')} />
+      {errors.password && <span role="alert">{errors.password.message}</span>}
+
+      <button type="submit">submit</button>
+    </form>
+  );
+}
+
+test("form's validation with Yup and TypeScript's integration", async () => {
+  const handleSubmit = jest.fn();
+  render(<TestComponent onSubmit={handleSubmit} />);
+
+  expect(screen.queryAllByRole(/alert/i)).toHaveLength(0);
+
+  await act(async () => {
+    user.click(screen.getByText(/submit/i));
+  });
+
+  expect(screen.getByText(/username is a required field/i)).toBeInTheDocument();
+  expect(screen.getByText(/password is a required field/i)).toBeInTheDocument();
+  expect(handleSubmit).not.toHaveBeenCalled();
+});

package/yup/src/__tests__/__fixtures__/data.ts

@@ -0,0 +1,72 @@
+import { Field, InternalFieldName } from 'react-hook-form';
+import * as yup from 'yup';
+
+export const schema = yup.object({
+  username: yup.string().matches(/^\w+$/).min(3).max(30).required(),
+  password: yup
+    .string()
+    .matches(new RegExp('.*[A-Z].*'), 'One uppercase character')
+    .matches(new RegExp('.*[a-z].*'), 'One lowercase character')
+    .matches(new RegExp('.*\\d.*'), 'One number')
+    .matches(
+      new RegExp('.*[`~<>?,./!@#$%^&*()\\-_+="\'|{}\\[\\];:\\\\].*'),
+      'One special character',
+    )
+    .min(8, 'Must be at least 8 characters in length')
+    .required('New Password is required'),
+  repeatPassword: yup.ref('password'),
+  accessToken: yup.string(),
+  birthYear: yup.number().min(1900).max(2013),
+  email: yup.string().email(),
+  tags: yup.array(yup.string()),
+  enabled: yup.boolean(),
+  like: yup.array().of(
+    yup.object({
+      id: yup.number().required(),
+      name: yup.string().length(4).required(),
+    }),
+  ),
+});
+
+export const validData: yup.InferType<typeof schema> = {
+  username: 'Doe',
+  password: 'Password123_',
+  repeatPassword: 'Password123_',
+  birthYear: 2000,
+  email: 'john@doe.com',
+  tags: ['tag1', 'tag2'],
+  enabled: true,
+  accessToken: 'accessToken',
+  like: [
+    {
+      id: 1,
+      name: 'name',
+    },
+  ],
+};
+
+export const invalidData = {
+  password: '___',
+  email: '',
+  birthYear: 'birthYear',
+  like: [{ id: 'z' }],
+};
+
+export const fields: Record<InternalFieldName, Field['_f']> = {
+  username: {
+    ref: { name: 'username' },
+    name: 'username',
+  },
+  password: {
+    ref: { name: 'password' },
+    name: 'password',
+  },
+  email: {
+    ref: { name: 'email' },
+    name: 'email',
+  },
+  birthday: {
+    ref: { name: 'birthday' },
+    name: 'birthday',
+  },
+};

package/yup/src/__tests__/__snapshots__/yup.ts.snap

@@ -0,0 +1,231 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`yupResolver should return a single error from yupResolver when validation fails 1`] = `
+Object {
+  "errors": Object {
+    "birthYear": Object {
+      "message": "birthYear must be a \`number\` type, but the final value was: \`NaN\` (cast from the value \`\\"birthYear\\"\`).",
+      "ref": undefined,
+      "type": "typeError",
+    },
+    "like": Array [
+      Object {
+        "id": Object {
+          "message": "like[0].id must be a \`number\` type, but the final value was: \`NaN\` (cast from the value \`\\"z\\"\`).",
+          "ref": undefined,
+          "type": "typeError",
+        },
+        "name": Object {
+          "message": "like[0].name is a required field",
+          "ref": undefined,
+          "type": "required",
+        },
+      },
+    ],
+    "password": Object {
+      "message": "One uppercase character",
+      "ref": Object {
+        "name": "password",
+      },
+      "type": "matches",
+    },
+    "username": Object {
+      "message": "username is a required field",
+      "ref": Object {
+        "name": "username",
+      },
+      "type": "required",
+    },
+  },
+  "values": Object {},
+}
+`;
+
+exports[`yupResolver should return a single error from yupResolver with \`mode: sync\` when validation fails 1`] = `
+Object {
+  "errors": Object {
+    "birthYear": Object {
+      "message": "birthYear must be a \`number\` type, but the final value was: \`NaN\` (cast from the value \`\\"birthYear\\"\`).",
+      "ref": undefined,
+      "type": "typeError",
+    },
+    "like": Array [
+      Object {
+        "id": Object {
+          "message": "like[0].id must be a \`number\` type, but the final value was: \`NaN\` (cast from the value \`\\"z\\"\`).",
+          "ref": undefined,
+          "type": "typeError",
+        },
+        "name": Object {
+          "message": "like[0].name is a required field",
+          "ref": undefined,
+          "type": "required",
+        },
+      },
+    ],
+    "password": Object {
+      "message": "One uppercase character",
+      "ref": Object {
+        "name": "password",
+      },
+      "type": "matches",
+    },
+    "username": Object {
+      "message": "username is a required field",
+      "ref": Object {
+        "name": "username",
+      },
+      "type": "required",
+    },
+  },
+  "values": Object {},
+}
+`;
+
+exports[`yupResolver should return all the errors from yupResolver when validation fails with \`validateAllFieldCriteria\` set to true 1`] = `
+Object {
+  "errors": Object {
+    "birthYear": Object {
+      "message": "birthYear must be a \`number\` type, but the final value was: \`NaN\` (cast from the value \`\\"birthYear\\"\`).",
+      "ref": undefined,
+      "type": "typeError",
+      "types": Object {
+        "typeError": "birthYear must be a \`number\` type, but the final value was: \`NaN\` (cast from the value \`\\"birthYear\\"\`).",
+      },
+    },
+    "like": Array [
+      Object {
+        "id": Object {
+          "message": "like[0].id must be a \`number\` type, but the final value was: \`NaN\` (cast from the value \`\\"z\\"\`).",
+          "ref": undefined,
+          "type": "typeError",
+          "types": Object {
+            "typeError": "like[0].id must be a \`number\` type, but the final value was: \`NaN\` (cast from the value \`\\"z\\"\`).",
+          },
+        },
+        "name": Object {
+          "message": "like[0].name is a required field",
+          "ref": undefined,
+          "type": "required",
+          "types": Object {
+            "required": "like[0].name is a required field",
+          },
+        },
+      },
+    ],
+    "password": Object {
+      "message": "One uppercase character",
+      "ref": Object {
+        "name": "password",
+      },
+      "type": "matches",
+      "types": Object {
+        "matches": Array [
+          "One uppercase character",
+          "One lowercase character",
+          "One number",
+        ],
+        "min": "Must be at least 8 characters in length",
+      },
+    },
+    "username": Object {
+      "message": "username is a required field",
+      "ref": Object {
+        "name": "username",
+      },
+      "type": "required",
+      "types": Object {
+        "required": "username is a required field",
+      },
+    },
+  },
+  "values": Object {},
+}
+`;
+
+exports[`yupResolver should return all the errors from yupResolver when validation fails with \`validateAllFieldCriteria\` set to true and \`mode: sync\` 1`] = `
+Object {
+  "errors": Object {
+    "birthYear": Object {
+      "message": "birthYear must be a \`number\` type, but the final value was: \`NaN\` (cast from the value \`\\"birthYear\\"\`).",
+      "ref": undefined,
+      "type": "typeError",
+      "types": Object {
+        "typeError": "birthYear must be a \`number\` type, but the final value was: \`NaN\` (cast from the value \`\\"birthYear\\"\`).",
+      },
+    },
+    "like": Array [
+      Object {
+        "id": Object {
+          "message": "like[0].id must be a \`number\` type, but the final value was: \`NaN\` (cast from the value \`\\"z\\"\`).",
+          "ref": undefined,
+          "type": "typeError",
+          "types": Object {
+            "typeError": "like[0].id must be a \`number\` type, but the final value was: \`NaN\` (cast from the value \`\\"z\\"\`).",
+          },
+        },
+        "name": Object {
+          "message": "like[0].name is a required field",
+          "ref": undefined,
+          "type": "required",
+          "types": Object {
+            "required": "like[0].name is a required field",
+          },
+        },
+      },
+    ],
+    "password": Object {
+      "message": "One uppercase character",
+      "ref": Object {
+        "name": "password",
+      },
+      "type": "matches",
+      "types": Object {
+        "matches": Array [
+          "One uppercase character",
+          "One lowercase character",
+          "One number",
+        ],
+        "min": "Must be at least 8 characters in length",
+      },
+    },
+    "username": Object {
+      "message": "username is a required field",
+      "ref": Object {
+        "name": "username",
+      },
+      "type": "required",
+      "types": Object {
+        "required": "username is a required field",
+      },
+    },
+  },
+  "values": Object {},
+}
+`;
+
+exports[`yupResolver should return an error from yupResolver when validation fails and pass down the yup context 1`] = `
+Object {
+  "errors": Object {
+    "name": Object {
+      "message": "name must be at least 6 characters",
+      "ref": undefined,
+      "type": "min",
+    },
+  },
+  "values": Object {},
+}
+`;
+
+exports[`yupResolver should return correct error message with using yup.test 1`] = `
+Object {
+  "errors": Object {
+    "": Object {
+      "message": "Email or name are required",
+      "ref": undefined,
+      "type": "name",
+    },
+  },
+  "values": Object {},
+}
+`;

package/yup/src/__tests__/yup.ts

@@ -0,0 +1,174 @@
+/* eslint-disable no-console, @typescript-eslint/ban-ts-comment */
+import * as yup from 'yup';
+import { yupResolver } from '..';
+import { schema, validData, fields, invalidData } from './__fixtures__/data';
+
+const shouldUseNativeValidation = false;
+
+describe('yupResolver', () => {
+  it('should return values from yupResolver when validation pass', async () => {
+    const schemaSpy = jest.spyOn(schema, 'validate');
+    const schemaSyncSpy = jest.spyOn(schema, 'validateSync');
+
+    const result = await yupResolver(schema)(validData, undefined, {
+      fields,
+      shouldUseNativeValidation,
+    });
+
+    expect(schemaSpy).toHaveBeenCalledTimes(1);
+    expect(schemaSyncSpy).not.toHaveBeenCalled();
+    expect(result).toEqual({ errors: {}, values: validData });
+  });
+
+  it('should return values from yupResolver with `mode: sync` when validation pass', async () => {
+    const validateSyncSpy = jest.spyOn(schema, 'validateSync');
+    const validateSpy = jest.spyOn(schema, 'validate');
+
+    const result = await yupResolver(schema, undefined, {
+      mode: 'sync',
+    })(validData, undefined, { fields, shouldUseNativeValidation });
+
+    expect(validateSyncSpy).toHaveBeenCalledTimes(1);
+    expect(validateSpy).not.toHaveBeenCalled();
+    expect(result).toEqual({ errors: {}, values: validData });
+  });
+
+  it('should return a single error from yupResolver when validation fails', async () => {
+    const result = await yupResolver(schema)(invalidData, undefined, {
+      fields,
+      shouldUseNativeValidation,
+    });
+
+    expect(result).toMatchSnapshot();
+  });
+
+  it('should return a single error from yupResolver with `mode: sync` when validation fails', async () => {
+    const validateSyncSpy = jest.spyOn(schema, 'validateSync');
+    const validateSpy = jest.spyOn(schema, 'validate');
+
+    const result = await yupResolver(schema, undefined, {
+      mode: 'sync',
+    })(invalidData, undefined, { fields, shouldUseNativeValidation });
+
+    expect(validateSyncSpy).toHaveBeenCalledTimes(1);
+    expect(validateSpy).not.toHaveBeenCalled();
+    expect(result).toMatchSnapshot();
+  });
+
+  it('should return all the errors from yupResolver when validation fails with `validateAllFieldCriteria` set to true', async () => {
+    const result = await yupResolver(schema)(invalidData, undefined, {
+      fields,
+      criteriaMode: 'all',
+      shouldUseNativeValidation,
+    });
+
+    expect(result).toMatchSnapshot();
+  });
+
+  it('should return all the errors from yupResolver when validation fails with `validateAllFieldCriteria` set to true and `mode: sync`', async () => {
+    const result = await yupResolver(schema, undefined, { mode: 'sync' })(
+      invalidData,
+      undefined,
+      {
+        fields,
+        criteriaMode: 'all',
+        shouldUseNativeValidation,
+      },
+    );
+
+    expect(result).toMatchSnapshot();
+  });
+
+  it('should return an error from yupResolver when validation fails and pass down the yup context', async () => {
+    const data = { name: 'eric' };
+    const context = { min: true };
+    const schemaWithContext = yup.object({
+      name: yup
+        .string()
+        .required()
+        .when('$min', (min: boolean, schema: yup.StringSchema) => {
+          return min ? schema.min(6) : schema;
+        }),
+    });
+
+    const validateSpy = jest.spyOn(schemaWithContext, 'validate');
+
+    const result = await yupResolver(schemaWithContext)(data, context, {
+      fields,
+      shouldUseNativeValidation,
+    });
+    expect(validateSpy).toHaveBeenCalledTimes(1);
+    expect(validateSpy).toHaveBeenCalledWith(
+      data,
+      expect.objectContaining({
+        abortEarly: false,
+        context,
+      }),
+    );
+    expect(result).toMatchSnapshot();
+  });
+
+  it('should show a warning log if yup context is used instead only on dev environment', async () => {
+    jest.spyOn(console, 'warn').mockImplementation(jest.fn);
+    process.env.NODE_ENV = 'development';
+
+    await yupResolver(yup.object(), { context: { noContext: true } })(
+      {},
+      undefined,
+      {
+        fields,
+        shouldUseNativeValidation,
+      },
+    );
+    expect(console.warn).toHaveBeenCalledWith(
+      "You should not used the yup options context. Please, use the 'useForm' context object instead",
+    );
+    process.env.NODE_ENV = 'test';
+  });
+
+  it('should not show a warning log if yup context is used instead only on production environment', async () => {
+    jest.spyOn(console, 'warn').mockImplementation(jest.fn);
+    process.env.NODE_ENV = 'production';
+
+    await yupResolver(yup.object(), { context: { noContext: true } })(
+      {},
+      undefined,
+      { fields, shouldUseNativeValidation },
+    );
+    expect(console.warn).not.toHaveBeenCalled();
+    process.env.NODE_ENV = 'test';
+  });
+
+  it('should return correct error message with using yup.test', async () => {
+    const result = await yupResolver(
+      yup
+        .object({
+          name: yup.string(),
+          email: yup.string(),
+        })
+        .test(
+          'name',
+          'Email or name are required',
+          (value) => !!(value && (value.name || value.email)),
+        ),
+    )({ name: '', email: '' }, undefined, {
+      fields,
+      shouldUseNativeValidation,
+    });
+
+    expect(result).toMatchSnapshot();
+  });
+
+  it("should merge default yup resolver options with yup's options", async () => {
+    const validateSpy = jest.spyOn(schema, 'validate');
+
+    await yupResolver(schema, { stripUnknown: true })(invalidData, undefined, {
+      fields,
+      shouldUseNativeValidation,
+    });
+
+    expect(validateSpy.mock.calls[0][1]).toEqual(
+      expect.objectContaining({ stripUnknown: true, abortEarly: false }),
+    );
+  });
+});

package/yup/src/index.ts

@@ -0,0 +1,2 @@
+export * from './yup';
+export * from './types';

package/yup/src/types.ts

@@ -0,0 +1,21 @@
+/* eslint-disable @typescript-eslint/ban-types */
+import { ResolverOptions, ResolverResult } from 'react-hook-form';
+import * as Yup from 'yup';
+import type Lazy from 'yup/lib/Lazy';
+
+type Options<T extends Yup.AnyObjectSchema | Lazy<any>> = Parameters<
+  T['validate']
+>[1];
+
+export type Resolver = <
+  T extends Yup.AnyObjectSchema | Lazy<any>,
+  TContext extends object = object,
+>(
+  schema: T,
+  schemaOptions?: Options<T>,
+  factoryOptions?: { mode?: 'async' | 'sync' },
+) => (
+  values: unknown,
+  context: TContext | undefined,
+  options: ResolverOptions<Yup.InferType<T>>,
+) => Promise<ResolverResult<Yup.InferType<T>>>;