Testing နှင့် Debugging Workflow

Bug တက်မှ console ထဲလိုက်ရှာတာထက် ပုံမှန်စစ်ဆေးတဲ့လမ်းကြောင်းရှိတာက ပိုမြန်ပါတယ်။ Test အကုန်ကိုတစ်မျိုးတည်းနဲ့မရေးဘဲ function အတွက် unit test၊ interactive UI အတွက် component test၊ အရေးကြီး user journey အတွက် browser test ခွဲသုံးပါ။

နားလည်ထားရမယ့် အချက်

TypeScript က data shape error အများကြီးကို run မလုပ်ခင်ဖမ်းပေးပါတယ်။ ESLint က code quality pattern ကိုစစ်ပြီး unit test က validation helper လို logic ကိုမြန်မြန်စစ်ပါတယ်။ End-to-end test က login၊ create note၊ deploy page လို တကယ့် flow ကို browser အနီးစပ်ဆုံးစစ်ပါတယ်။ Server Component ကို unit test တိုက်ရိုက်လုပ်တာထက် data function ကိုသီးခြားစစ်ပြီး async UI flow ကို E2E နဲ့စစ်တာ ပိုလက်တွေ့ကျနိုင်ပါတယ်။

အတူတူ စမ်းရေးကြည့်မယ်

import { describe, expect, it } from "vitest";
import { validateTitle } from "./validate-title";

describe("validateTitle", () => {
  it("စာတိုလွန်းရင် error ပြန်သည်", () => {
    expect(validateTitle("Hi")).toEqual({ ok: false });
  });

  it("သင့်တော်သော title ကိုလက်ခံသည်", () => {
    expect(validateTitle("Next.js Notes")).toEqual({ ok: true });
  });
});

Code က ဘယ်လိုအလုပ်လုပ်သလဲ

Test က title အတိုကို reject လုပ်ပြီး သင့်တော်တဲ့ title ကို accept လုပ်တာစစ်ပါတယ်။ Bug report ရေးချိန် expected၊ actual၊ steps နဲ့ environment ကိုမှတ်ထားရင် ပြန်ဖော်ထုတ်ရလွယ်ပါတယ်။

Validation rule နှစ်ခုလုံး test pass ဖြစ်ပြီး regression ကို နောက်ပိုင်းဖမ်းနိုင်မည်။

Next.js — Testing — Next.js