Yup

O que é

Yup é um pacote de validação de objetos, geralmente utilizado para validar posts para a API com dados que o usuário forneceu. Ele permite declarar o tipo de cada elemento do objeto, assim como regras que devem ser validada para considerar que o objeto fornecido está válido.

Como usar

Geralmente utilizamos o yup junto com o React-Hook-Form de modo a validar o body que o usuário digitou antes de ir para a API e já conseguir avisar dos erros antes de conseguir

import * as yup from 'yup';

// Criando schema para definir como vai ser o objeto
const schema = yup.object().shape({
  name: yup.string().required(),
  age: yup.number().required().positive().integer(),
  email: yup.string().email(),
  website: yup.string().url(),
  createdOn: yup.date().default(function () {
    return new Date();
  }),
});

// Conferindo validade
schema
  .isValid({
    name: 'jimmy',
    age: 24,
  })
  .then(function (valid) {
    valid; // => true
  });

Como aprender

O melhor jeito é criar um schema complexo e tentar passar objetos por ele. Ver como ele vai lidar como cada valor que você colocar ou a falta de alguma coisa required. Conferir como vem o objeto de erro e como mostrar pro usuário o que está com problema.

Material útil

Validando o conhecimento

Em um projeto react em branco, criar 3 tipos de schema diferentes e passar diferentes objetos por eles vendo como cada erro é retornado.

← TWACypress →