React/Yup/ObjectSchemaのテスト

初めに

バリデーションテストで直接useFormの挙動をテストするのが難しかったので「ObjectSchemaのテストができればform側の問題に限定できるんじゃね？」と思った次第。

コード

jestを想定。例えば以下のformを考える。

export const UserSchema = object().shape({
  name: string().trim().required(),
  age: number().required(),
})

この時テストコードは以下。

describe("UserSchema", () => {
  test("正常ケース", () => {
    const testValues = {
      name: "鈴木一郎",
      age: 18,
    }
    expect(UserSchema.isValidSync(testValues)).toBe(true)
  })
})

• 何がうれしいか
  • 前準備が楽→renderHookとか使うとセットアップが面倒
  • 誰でも書ける→フォームの構成を知らなくても(極論フロントの人でなくても)書ける

最後に

「如何にテストケースを追加していくか」は大事ですね。