Unit test — Vitest, mock আর snapshot

১ · Unit test কেন, আর Vitest কোথায় বসে

বাজারঘরের মালিক একদিন জিজ্ঞেস করলেন, “শুক্রবারে ৫% বাড়তি ছাড় দিলে EID10 কুপনের সাথে ঠিক যোগ হবে তো? আর রাত বারোটার পরেই কি শুক্রবার ধরা হবে?” এই প্রশ্নের উত্তর দিতে browser খুলে কার্টে মাল ভরে ঘড়ি দেখে বসে থাকা যায়। অথবা একটি ছোট program লেখা যায়, যে এক সেকেন্ডের কম সময়ে একই প্রশ্ন একশোবার করে, আর প্রতিবার উত্তর মিলিয়ে দেখে। দ্বিতীয়টিই unit test.

Test-এর তত্ত্ব, মানে কোনটি unit, কোনটি integration আর কতটুকু কোনটি লাগবে, এই কোর্সে আগের পর্ব ৭২-এ (ফুল-স্ট্যাক test কৌশল) দেখেছেন। আরও পূর্ণ তত্ত্ব আছে Unit testing আর Testing-এর মূল ধারণা পর্বে। এখানে আমরা হাতে-কলমে কাজ করব। আগেও কয়েকবার ছোট করে Vitest এসেছে: পর্ব ১৭-এ reducer test, পর্ব ২৯-এ নকল repository দিয়ে service test, পর্ব ৪২-এ query-র বাজেট, আর পর্ব ৪৮-এ role বনাম route-এর ছক। এবার পুরো টুলটি ভালো করে চিনব।

Vitest একটি test runner: সে আপনার test ফাইল খুঁজে বের করে, চালায়, আর ফল দেখায়। তার বিশেষত্ব হলো সে Vite-এর একই কাঠামো ব্যবহার করে। ফলে TypeScript, ES module আর Vite-এর config আলাদা ঝামেলা ছাড়াই test-এও চলে।

শুরুতে একটি ছোট মডেল দেখুন। Vitest-এর test আর expect ভেতরে কী করে, তার একটি খুব ছোট রূপ নিচে আছে। এটি আসল Vitest নয়, শুধু শেখার জন্য বানানো, কিন্তু মূল চিন্তা একই। চালিয়ে দেখুন।

// শিক্ষণ মডেল: Vitest-এর test আর expect ভেতরে মোটামুটি এমন
const results = [];
function deepEqual(a, b) {
  if (Object.is(a, b)) return true;
  if (typeof a !== 'object' || typeof b !== 'object' || !a || !b) return false;
  const ka = Object.keys(a), kb = Object.keys(b);
  return ka.length === kb.length && ka.every((k) => deepEqual(a[k], b[k]));
}
function expect(got) {
  const fail = (msg) => { throw new Error(msg); };
  return {
    toBe: (want) => Object.is(got, want) || fail(`expected ${got} to be ${want}`),
    toEqual: (want) => deepEqual(got, want) ||
      fail(`expected ${JSON.stringify(got)} to equal ${JSON.stringify(want)}`),
    toThrow(text) {
      try { got(); } catch (e) { return e.message.includes(text) || fail(`wrong error: ${e.message}`); }
      fail('expected function to throw');
    },
  };
}
function test(name, fn) {
  try { fn(); results.push(`✓ ${name}`); } catch (e) { results.push(`× ${name} → ${e.message}`); }
}
// বাজারঘরের ছোট একটি নিয়ম
const totals = (paisa, qty) => {
  if (qty < 1) throw new Error('BAD_QTY');
  return { subtotal: paisa * qty, delivery: paisa * qty >= 100000 ? 0 : 6000 };
};
test('toEqual: content', () => expect(totals(42000, 2)).toEqual({ subtotal: 84000, delivery: 6000 }));
test('toBe: same object?', () => expect(totals(42000, 2)).toBe(totals(42000, 2)));
test('toBe on a number', () => expect(totals(50000, 2).delivery).toBe(0));
test('toThrow', () => expect(() => totals(42000, 0)).toThrow('BAD_QTY'));
test('NaN is NaN with Object.is', () => expect(0 / 0).toBe(NaN));
console.log(results.join('\n'));
console.log(`Tests: ${results.filter((r) => r[0] === '×').length} failed | ${results.filter((r) => r[0] === '✓').length} passed`);

✓ toEqual: content
× toBe: same object? → expected [object Object] to be [object Object]
✓ toBe on a number
✓ toThrow
✓ NaN is NaN with Object.is
Tests: 1 failed | 4 passed

২ · Vite আর TypeScript প্রজেক্টে Vitest বসানো

আমরা একটি নতুন প্রজেক্ট বানিয়েছি, সত্যিই চালিয়েছি, আর নিচের সব আউটপুট সেই প্রজেক্টের। লেখার সময়ের version: Node 24.15.0, create-vite 9.3.3, Vite 8.3.5, TypeScript 7.0.2, Vitest 5.1.0, @vitest/coverage-v8 5.1.0. Vitest-এর docs অনুযায়ী Vitest 5-এর জন্য Vite 6.4.0 বা নতুন আর Node 22.12.0 বা নতুন লাগে। কাজের পরিবেশের পুরো ছবি আছে পর্ব ০৫-এ।

$ npm create vite@9.3.3 bazarghar -- --template vanilla-ts --no-interactive
$ cd bazarghar
$ npm install
$ npm install -D vitest@5.1.0 @vitest/coverage-v8@5.1.0

তারপর দুটি ছোট কাজ। package.json-এ script, আর একটি config ফাইল। Vite-এর config থাকলে সেখানেই test অংশ যোগ করা যায়। আমাদের template-এ vite.config.ts ছিল না, তাই আলাদা vitest.config.ts বানানো হলো।

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "test": "vitest",
  "test:run": "vitest run",
  "coverage": "vitest run --coverage"
}

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    include: ['src/**/*.test.ts'],
    coverage: {
      provider: 'v8',
      reporter: [['text', { skipFull: false }]],
      include: ['src/shop/**/*.ts'],
    },
  },
});

vitest একা চালালে সে watch mode-এ থাকে, ফাইল বদলালেই আবার চালায়। vitest run একবার চালিয়ে বেরিয়ে যায়, যা CI-র জন্য দরকার। আমাদের test ফাইলগুলো কোডের পাশেই থাকে: cart.ts-এর পাশে cart.test.ts.

src/shop/
  money.ts         টাকা, পয়সা, বাংলা লেখা
  cart.ts          কার্টের মোট, ছাড়, delivery
  reservation.ts   ১৫ মিনিটের stock ধরে রাখা
  sms.ts           SMS gateway-তে HTTP ডাক
  order.ts         অর্ডার + SMS
  receipt.ts       রসিদের লেখা
  *.test.ts        প্রতিটির পাশে তার test

এবার npx vitest run চাপলে ভেতরে কী কী ঘটে, ধাপে ধাপে দেখুন। সংখ্যাগুলো আমাদের সত্যিকারের run-এর।

test: {
  include: ['src/**/*.test.ts'],
}

src/shop/cart.test.ts
src/shop/money.test.ts
src/shop/order.test.ts
src/shop/receipt.test.ts
src/shop/reservation.test.ts
5 files

worker 1 ← cart.test.ts
worker 2 ← money.test.ts
worker 3 ← order.test.ts   (এখানে vi.mock('./sms'))
...
order.test.ts-এর নকল sms cart.test.ts দেখে না

vi.mock('./sms', ...)     // hoisted, সবার আগে
import { placeOrder } from './order';
import { sendSms } from './sms';

describe('cartTotals')        → ৬টি it জমা হলো
  beforeEach  useFakeTimers, setSystemTime
  it('coupon: 10% off, then delivery')  ✓ 3ms
  afterEach   useRealTimers
  ... আরও ৫টি

 Test Files  5 passed (5)
      Tests  29 passed (29)
   Duration  159ms (import 45%, transform 33%,
             tests 14%, worker 8%)

৩ · expect আর matcher — toBe, toEqual, toThrow, async

প্রতিটি test-এর হৃদয় একটি assertion: expect(যা পেলাম).matcher(যা চাই). toBe, toEqual এগুলোকে বলে matcher. বাজারঘরের কার্টের আসল test দেখুন।

import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { cartTotals, type Line } from './cart';

const chal = (qty: number): Line => ({ sku: 'chal-5kg', unitPaisa: 42000, qty });

describe('cartTotals', () => {
  beforeEach(() => {
    vi.useFakeTimers();
    vi.setSystemTime(new Date('2026-11-04T06:00:00Z')); // বুধবার, ঢাকায় দুপুর ১২টা
  });
  afterEach(() => {
    vi.useRealTimers();
  });

  it('coupon: 10% off, then delivery', () => {
    expect(cartTotals([chal(2)], 'EID10')).toEqual({
      subtotal: 84000, discount: 8400, delivery: 6000, total: 81600,
    });
  });

  it('toBe compares identity, toEqual compares content', () => {
    const a = cartTotals([chal(1)]);
    const b = cartTotals([chal(1)]);
    expect(a).toEqual(b);
    expect(a).not.toBe(b);
    expect(a.total).toBe(48000);
  });

  it('rejects bad input', () => {
    expect(() => cartTotals([])).toThrow('EMPTY_CART');
    expect(() => cartTotals([chal(0)])).toThrow(RangeError);
    expect(() => cartTotals([chal(1)], 'FREE100')).toThrow(/BAD_COUPON/);
  });
});

describe কয়েকটি test একসাথে বাঁধে, আর reporter-এ নামের আগে বসে: cartTotals > coupon: .... it আর test একই জিনিস, শুধু পড়তে আলাদা। beforeEach আর afterEach হলো test hook: প্রতিটি test-এর আগে একই প্রস্তুতি, পরে একই পরিষ্কার। এখানে প্রস্তুতি হলো ঘড়ি একটি জানা সময়ে বসানো, যা অংশ ৭-এ বিস্তারিত দেখবেন।

toThrow-এর তিনটি ধরন খেয়াল করুন: একটি লেখা (বার্তার ভেতরে থাকলেই চলবে), একটি error class, আর একটি regular expression. খেয়াল করুন, ফাংশনটি সরাসরি না ডেকে () =>-এর ভেতরে মুড়ে দেওয়া হয়েছে। সরাসরি ডাকলে error test-এর ভেতরেই ফেটে যেত, expect ধরার সুযোগই পেত না।

সত্যিকারের Vitest-এ দুটি সমান object-এ toBe লিখলে কী বার্তা আসে, সেটিও আমরা চালিয়ে দেখেছি। বার্তাটি নিজেই সমাধান বলে দেয়:

 FAIL  src/shop/tobe.test.ts > toBe on two equal objects
AssertionError: expected { subtotal: 42000, discount: +0, …(2) } to be { subtotal: 42000, discount: +0, …(2) } // Object.is equality

If it should pass with deep equality, replace "toBe" with "toStrictEqual"

Expected: { subtotal: 42000, discount: +0, …(2) }
Received: serializes to the same string

Async test: resolves আর rejects

অর্ডার দেওয়ার ফাংশন async, কারণ সে SMS পাঠায়। Async test লিখতে test ফাংশনকেও async করুন, আর await দিন। .resolves promise পূর্ণ হলে তার মান মেলায়, .rejects ব্যর্থ হলে error মেলায়। Async-এর ভিত্তি আছে async/await পর্বে।

it('bad phone: rejects, no sms', async () => {
  await expect(placeOrder('12345', [chal])).rejects.toThrow('BAD_PHONE');
  expect(sendSms).not.toHaveBeenCalled();
});

৪ · test.each — টাকা, পয়সা আর বাংলা সংখ্যার ছক

বাজারঘরে টাকা সবসময় পূর্ণসংখ্যা পয়সায় রাখা হয়। কারণটি আপনি floating point নিয়ে আগে শুনেছেন, কিন্তু test দিয়ে নিজের চোখে দেখা আলাদা জিনিস। একই নিয়ম অনেক মানে যাচাই করার জন্য আছে test.each, যাকে সাধারণভাবে table-driven test বলে। একটি ছক দিন, প্রতিটি সারির জন্য একটি আলাদা test তৈরি হবে।

describe('formatTaka', () => {
  test.each([
    [0, '০.০০৳'],
    [1250, '১২.৫০৳'],
    [123450, '১,২৩৪.৫০৳'],
    [12345678, '১,২৩,৪৫৬.৭৮৳'],
  ])('%i paisa -> %s', (paisa, text) => {
    expect(formatTaka(paisa)).toBe(text);
  });
});

describe('paisa rounding', () => {
  test.each([
    { taka: 12.5, paisa: 1250 },
    { taka: 19.99, paisa: 1999 },
    { taka: 1.005, paisa: 101 },
  ])('float: $taka taka -> $paisa paisa', ({ taka, paisa }) => {
    expect(takaToPaisaFloat(taka)).toBe(paisa);   // Math.round(taka * 100)
  });
});

formatTaka ভেতরে Intl.NumberFormat('bn-BD', {style: 'currency', currency: 'BDT'}) ব্যবহার করে। ফলে বাংলা অঙ্ক আসে, আর লাখের হিসাবে কমা বসে: ১,২৩,৪৫৬.৭৮৳. বাংলা সংখ্যা আর তারিখের পুরো আলোচনা আছে পর্ব ৫৯-এ। Test-এর নাম %i, %s বা $taka দিয়ে সারির মান থেকে বানানো হয়, তাই কোন সারি ভাঙল তা নামেই বোঝা যায়। সত্যিকারের run-এ তৃতীয় সারিটি ভাঙল:

 ❯ src/shop/money.test.ts (16 tests | 1 failed) 8ms
   ❯ paisa rounding (11)
     × float: 1.005 taka -> 101 paisa 4ms

 FAIL  src/shop/money.test.ts > paisa rounding > float: 1.005 taka -> 101 paisa
AssertionError: expected 100 to be 101 // Object.is equality

- Expected
+ Received

- 101
+ 100

 ❯ src/shop/money.test.ts:26:36
     24|     { taka: 1.005, paisa: 101 },
     25|   ])('float: $taka taka -> $paisa paisa', ({ taka, paisa }) => {
     26|     expect(takaToPaisaFloat(taka)).toBe(paisa);
       |                                    ^
…
      Tests  1 failed | 29 passed (30)

Diff-এর ভাষাটি পড়তে শিখুন: - Expected হলো যা চেয়েছিলেন, + Received হলো যা পেলেন। কারণ হলো 1.005 * 100 আসলে 100.49999999999999, আর Math.round সেটিকে 100 বানায়। Float-এ 1.005 সংখ্যাটিই ঠিকঠাক রাখা যায় না। সমাধান float মেরামত নয়, float এড়ানো: ফর্মের লেখা থেকে সরাসরি পয়সা বানানো, আর দুই ঘরের বেশি দশমিক এলে প্রত্যাখ্যান করা।

নিচের ছকে আরেকটি চেনা ভুল দেখুন: Math.floor(taka * 100). অনেক কোডে এটি পাওয়া যায়, কারণ “পয়সা তো কাটতেই হবে”। চালিয়ে দেখুন কয়টি সারি টেকে।

// শিক্ষণ মডেল: test.each — একই test, অনেক সারি
const toPaisaFloat = (taka) => Math.floor(taka * 100);          // চেনা ভুল পথ
function parseTaka(text) {                                        // ঠিক পথ
  const m = /^(\d+)(?:\.(\d{1,2}))?$/.exec(text);
  if (!m) throw new Error('BAD_AMOUNT ' + text);
  return Number(m[1]) * 100 + Number((m[2] ?? '0').padEnd(2, '0'));
}
const each = (rows) => (title, fn) => {
  let pass = 0;
  for (const row of rows) {
    const name = title.replace(/\$(\w+)/g, (_, k) => row[k]);
    try { fn(row); pass++; console.log('✓', name); }
    catch (e) { console.log('×', name, '→', e.message); }
  }
  console.log(`  ${pass}/${rows.length} passed`);
};
const rows = [
  { text: '12.5', want: 1250 },
  { text: '19.99', want: 1999 },
  { text: '0.07', want: 7 },
  { text: '1.15', want: 115 },
  { text: '4.35', want: 435 },
];
const check = (got, want) => { if (got !== want) throw new Error(`expected ${want}, got ${got}`); };
each(rows)('float  $text', ({ text, want }) => check(toPaisaFloat(Number(text)), want));
each(rows)('string $text', ({ text, want }) => check(parseTaka(text), want));
try { parseTaka('1.005'); } catch (e) { console.log('1.005 →', e.message); }
console.log('raw:', 19.99 * 100, 1.15 * 100, 4.35 * 100);

✓ float  12.5
× float  19.99 → expected 1999, got 1998
✓ float  0.07
× float  1.15 → expected 115, got 114
× float  4.35 → expected 435, got 434
  2/5 passed
✓ string 12.5
✓ string 19.99
✓ string 0.07
✓ string 1.15
✓ string 4.35
  5/5 passed
1.005 → BAD_AMOUNT 1.005
raw: 1998.9999999999998 114.99999999999999 434.99999999999994

পয়সা গোল করার নিয়ম, হিসাব করে

ছাড়ের নিয়ম: শতাংশ ছাড় নিচের দিকে গোল করা পয়সায়, floor(paisa × pct / 100). পরীক্ষায় এমন হিসাব প্রায়ই আসে, আর test-এর ছকেও ঠিক এগুলোই বসে:

পূর্ণসংখ্যায় গুণ আগে, ভাগ পরে। ফলে ভগ্নাংশ আসে একবারই, শেষে, আর নিয়ম মেনে কাটা হয়। “গোল করা নিচে, না কাছের দিকে?” এটি প্রোগ্রামারের সিদ্ধান্ত নয়, ব্যবসার সিদ্ধান্ত। সিদ্ধান্ত হলে সেটি test-এর ছকে লিখে রাখুন, তাহলে কেউ চুপচাপ বদলাতে পারবে না।

৫ · Watch mode, filter আর .only-র বিপদ

কাজ করার সময় npm test (মানে vitest) চালিয়ে রেখে দিন। আমরা watch mode চালু রেখে reservation.ts-এ একটি comment বদলেছি। সত্যিকারের আউটপুট, রং বাদে:

 DEV  v5.1.0 ~/bazarghar

 Test Files  5 passed (5)
      Tests  29 passed (29)
   Duration  168ms (import 57%, tests 17%, transform 15%, worker 10%)

 PASS  Waiting for file changes...
       press h to show help, press q to quit

 RERUN  src/shop/reservation.ts x1

 Test Files  1 passed (1)
      Tests  3 passed (3)
   Duration  27ms

খেয়াল করুন, দ্বিতীয়বার ৫টি নয়, শুধু ১টি ফাইল চলেছে। Vitest জানে কোন test ফাইল কোন source ফাইল import করে, কারণ Vite-এর module graph তার হাতে আছে। reservation.ts শুধু reservation.test.ts ব্যবহার করে, তাই ৩টি test, 27ms. বড় প্রজেক্টে এই পার্থক্যই watch mode-কে আরামদায়ক রাখে।

কয়েকটি test আলাদা করে চালানোর উপায়:

Vitest 5-এ -t-এর নিয়ম একটু বদলেছে: describe আর test-এর নাম এখন ' > ' দিয়ে জোড়া হয়। তাই -t 'cartTotals coupon' আর মেলে না, -t coupon লিখুন।

.only সবচেয়ে বিপজ্জনক, কারণ সে চুপচাপ কাজ করে। আমরা cart.test.ts-এ একটি test-কে it.only করে দুইভাবে চালিয়েছি:

$ npx vitest run
 Test Files  5 passed (5)
      Tests  24 passed | 5 skipped (29)

$ CI=true npx vitest run
 FAIL  src/shop/cart.test.ts > cartTotals > coupon: 10% off, then delivery
Error: [Vitest] Unexpected .only modifier. Remove it or pass --allowOnly argument to bypass this error
 Test Files  1 failed | 4 passed (5)
      Tests  1 failed | 23 passed | 5 skipped (29)

নিজের কম্পিউটারে সব সবুজ, শুধু “5 skipped” লেখা, যা চোখ এড়িয়ে যায়। সেই ৫টি test-এর মধ্যে আছে শুক্রবারের ছাড়ের test. আরও খেয়াল করুন, .only শুধু নিজের ফাইলের অন্য test বাদ দিয়েছে, বাকি ৪টি ফাইল পুরোটাই চলেছে। CI-তে ব্যাপারটি আলাদা: Vitest-এর allowOnly option-এর ডিফল্ট !process.env.CI, তাই CI-তে .only পেলেই সে ফেল করায়। এই সুরক্ষাটি আছে বলে --allowOnly দিয়ে বন্ধ করবেন না। CI-র পুরো pipeline আসবে পর্ব ৮১-তে।

৬ · Test double — vi.fn, vi.spyOn আর vi.mock

অর্ডার হলে বাজারঘর ক্রেতাকে SMS পাঠায় (পর্ব ৬৩)। Test-এ কি সত্যিই SMS যাবে? না। টাকা খরচ হবে, ধীর হবে, আর network না থাকলে test ভাঙবে। তাই আসল sendSms-এর বদলে একটি নকল বসাতে হয়। এমন নকলের সাধারণ নাম test double. Stub, mock, spy, fake-এর পূর্ণ তত্ত্ব আছে Test double পর্বে। এখানে Vitest-এর তিনটি যন্ত্র:

কোথায় নকল বসাবেন, সেটিই আসল সিদ্ধান্ত। নিচের ছবিতে placeOrder-এর চারপাশ দেখুন।

নকল ফাংশন ভেতরে কী করে আর module বদলানো আসলে কী, একটি ছোট মডেলে দেখুন। আসল Vitest-এ “module registry” Vite চালায়। এখানে একটি সাধারণ object দিয়ে বোঝানো হলো।

// শিক্ষণ মডেল: vi.fn কীভাবে ডাক মনে রাখে, আর vi.mock কীভাবে module বদলায়
function fn(impl = () => undefined) {
  const mock = function (...args) {
    mock.calls.push(args);
    const once = mock.onceQueue.shift();
    return (once ?? impl)(...args);
  };
  mock.calls = [];
  mock.onceQueue = [];
  mock.mockImplementationOnce = (f) => { mock.onceQueue.push(f); return mock; };
  mock.mockClear = () => { mock.calls = []; };
  return mock;
}
// "module registry": import করলে যা পাওয়া যায়
const registry = { './sms': { sendSms: () => { throw new Error('REAL NETWORK CALL'); } } };
const load = (name) => registry[name];

function placeOrder(phone, total) {           // order.ts-এর মতো
  const { sendSms } = load('./sms');
  try { sendSms(phone, `মোট ${total / 100} টাকা`); return 'OK'; }
  catch (e) { return 'OK, sms failed: ' + e.message; }
}
// vi.mock('./sms', ...) — import-এর আগেই বদলে দেওয়া
registry['./sms'] = { sendSms: fn(() => ({ id: 'sms-1' })) };
const { sendSms } = load('./sms');

console.log(placeOrder('01700000000', 81600));
sendSms.mockImplementationOnce(() => { throw new Error('SMS_FAILED'); });
console.log(placeOrder('01800000000', 90000));
console.log('calls:', sendSms.calls.length, JSON.stringify(sendSms.calls[0]));
sendSms.mockClear();                            // Vitest 5-এ প্রতিটি test-এর আগে নিজে থেকে
console.log('after clear:', sendSms.calls.length);

OK
OK, sms failed: SMS_FAILED
calls: 2 ["01700000000","মোট 816 টাকা"]
after clear: 0

এবার আসল Vitest-এ বাজারঘরের অর্ডারের test:

import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { placeOrder } from './order';
import { sendSms } from './sms';

vi.mock('./sms', () => ({
  sendSms: vi.fn(async () => ({ id: 'sms-1' })),
}));

const chal = { sku: 'chal-5kg', unitPaisa: 42000, qty: 2 };

describe('placeOrder', () => {
  beforeEach(() => {
    vi.useFakeTimers();
    vi.setSystemTime(new Date('2026-11-04T06:00:00Z'));
  });
  afterEach(() => {
    vi.useRealTimers();
    vi.restoreAllMocks();
  });

  it('sends exactly one sms with the Bangla total', async () => {
    await expect(placeOrder('01700000000', [chal], 'EID10')).resolves.toMatchObject({ total: 81600 });
    expect(sendSms).toHaveBeenCalledTimes(1);
    expect(sendSms).toHaveBeenCalledWith('01700000000', 'বাজারঘর: অর্ডার নিশ্চিত, মোট ৮১৬.০০৳');
  });

  it('bad phone: rejects, no sms', async () => {
    await expect(placeOrder('12345', [chal])).rejects.toThrow('BAD_PHONE');
    expect(sendSms).not.toHaveBeenCalled();
  });

  it('sms failure does not cancel the order, but warns', async () => {
    vi.mocked(sendSms).mockRejectedValueOnce(new Error('SMS_FAILED'));
    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
    await expect(placeOrder('01700000000', [chal])).resolves.toMatchObject({ total: 90000 });
    expect(warn).toHaveBeenCalledWith('sms failed', 'SMS_FAILED');
  });
});

ধাপে ধাপে দেখুন, কোন মুহূর্তে কোন জিনিস আসল আর কোনটি নকল। নিচের কোডটি ওপরের test-এর সংক্ষিপ্ত রূপ।

1import { placeOrder } from './order';2import { sendSms } from './sms';3vi.mock('./sms', () => ({ sendSms: vi.fn(...) }));4it('one sms', ...) placeOrder(phone, [chal], 'EID10')5  expect(sendSms).toHaveBeenCalledTimes(1)6it('bad phone', ...) rejects BAD_PHONE7  expect(sendSms).not.toHaveBeenCalled()8it('sms fails', ...) mockRejectedValueOnce(...)9  vi.spyOn(console, 'warn')10afterEach: vi.restoreAllMocks()

দুটি সত্যিকারের পরীক্ষা এই নকশার মূল্য দেখায়। প্রথমে আমরা vi.mock-এর লাইনটি মুছে চালিয়েছি:

stderr | src/shop/order.test.ts > placeOrder > sends exactly one sms with the Bangla total
sms failed fetch failed

 ❯ src/shop/order.test.ts (3 tests | 3 failed) 40ms
 FAIL  src/shop/order.test.ts > placeOrder > sends exactly one sms with the Bangla total
TypeError: [AsyncFunction sendSms] is not a spy or a call to a spy!

প্রথম লাইনটিই সবচেয়ে ভয়ের: fetch failed. মানে test সত্যিই network-এ বেরোনোর চেষ্টা করেছে। আমাদের ঠিকানা ইচ্ছা করে example.invalid, তাই কিছু যায়নি। আসল gateway-র ঠিকানা আর আসল key থাকলে একজন ক্রেতার ফোনে সত্যিকারের SMS চলে যেতে পারত। আর test ছিল 4ms-এর জায়গায় 37ms.

দ্বিতীয় পরীক্ষায় config-এ clearMocks: false দিয়ে Vitest 4-এর মতো আচরণ ফেরানো হলো:

 FAIL  src/shop/order.test.ts > placeOrder > bad phone: rejects, no sms
AssertionError: expected "vi.fn()" to not be called at all, but actually been called 1 times

Received:

  1st vi.fn() call:

    Array [
      "01700000000",
      "বাজারঘর: অর্ডার নিশ্চিত, মোট ৮১৬.০০৳",
    ]

আগের test-এর ডাক পরের test-এ রয়ে গেছে। এক test-এর অবস্থা অন্য test-এ ছড়ালে test-এর ক্রম বদলালেই ফল বদলায়। Vitest 5 এই কারণেই ডিফল্ট বদলেছে। পুরোনো প্রজেক্টে clearMocks বন্ধ থাকলে নিজে beforeEach-এ vi.clearAllMocks() দিন।

একটি সূক্ষ্ম পার্থক্য: Jest-এ mockReset নকলকে খালি ফাংশন বানিয়ে দেয়, আর Vitest-এ vi.fn(impl)-এর mockReset আবার impl-এ ফেরে। Vitest-এর Jest migration পাতায় এটি লেখা আছে। vi.mock-এর factory-তে বাইরের variable সরাসরি ব্যবহার করা যায় না, কারণ hoist হওয়ার পরে সেগুলো তখনো তৈরি হয়নি। দরকার হলে vi.hoisted দিয়ে সেগুলো বানাতে হয়।

৭ · সময়কে বশ করা — fake timer আর setSystemTime

বাজারঘরে চেকআউট শুরু হলে পণ্য ১৫ মিনিট ধরে রাখা হয়, একে বলে stock reservation (পর্ব ৬৫)। টাকা না এলে ১৫ মিনিট পরে stock ফেরত যায়। এর test-এ কি ১৫ মিনিট বসে থাকবেন? না। Fake timer setTimeout, setInterval আর Date-কে নকল ঘড়িতে বাঁধে। তারপর আপনি নিজে ঘড়ির কাঁটা ঘোরান।

// শিক্ষণ মডেল: fake timer — সময় আমাদের হাতে, আসল ঘড়ি নয়
function createClock(start) {
  let now = start, seq = 0;
  const timers = [];                                  // { id, at, fn }
  return {
    now: () => now,
    setTimeout(fn, ms) { const id = ++seq; timers.push({ id, at: now + ms, fn }); return id; },
    clearTimeout(id) { const i = timers.findIndex((t) => t.id === id); if (i >= 0) timers.splice(i, 1); },
    advance(ms) {                                     // vi.advanceTimersByTime
      const end = now + ms;
      for (;;) {
        timers.sort((a, b) => a.at - b.at || a.id - b.id);
        if (!timers.length || timers[0].at > end) break;
        const t = timers.shift(); now = t.at; t.fn();
      }
      now = end;
    },
    count: () => timers.length,
  };
}
const MIN = 60 * 1000, clock = createClock(0), stock = { 'chal-5kg': 3 };
function reserve(sku, qty) {
  stock[sku] -= qty;
  return clock.setTimeout(() => { stock[sku] += qty; console.log(`  t=${clock.now() / MIN}min: hold expired, +${qty}`); }, 15 * MIN);
}
reserve('chal-5kg', 2);                              // ২ প্যাকেট ধরে রাখা
console.log('t=0     stock', stock['chal-5kg'], 'timers', clock.count());
clock.advance(14 * MIN + 59 * 1000);
console.log('t=14:59 stock', stock['chal-5kg']);
clock.advance(1000);
console.log('t=15:00 stock', stock['chal-5kg'], 'timers', clock.count());
const b = reserve('chal-5kg', 1);
clock.advance(5 * MIN); clock.clearTimeout(b);      // টাকা এলো, confirm
clock.advance(60 * MIN);
console.log('t=80    stock', stock['chal-5kg'], 'timers', clock.count());

t=0     stock 1 timers 1
t=14:59 stock 1
  t=15min: hold expired, +2
t=15:00 stock 3 timers 0
t=80    stock 2 timers 0

আসল Vitest test আর তার ধাপগুলো দেখুন। Verbose reporter-এ এই test-এর সময় ছিল 4ms.

1vi.useFakeTimers();2const r = createReservations({ 'chal-5kg': 3 }, onExpire);3const id = r.reserve('chal-5kg', 2);4vi.advanceTimersByTime(HOLD_MS - 1);5expect(r.available('chal-5kg')).toBe(1);6vi.advanceTimersByTime(1);7expect(r.available('chal-5kg')).toBe(3);8vi.useRealTimers();   // afterEach

Confirm হওয়া reservation-এর test-এ আরেকটি কাজের জিনিস আছে: vi.getTimerCount(). টাকা আসার পরে timer মুছে গেছে কি না, সেটি সরাসরি দেখা যায়। Timer মুছতে ভুলে গেলে stock একসময় নিজে থেকে বেড়ে যেত, আর সেই bug সাধারণ চোখে ধরা পড়া কঠিন।

তারিখ-নির্ভর ছাড়: ঢাকার শুক্রবার

মালিকের নিয়ম: শুক্রবারে বাড়তি ৫% ছাড়। “শুক্রবার” মানে ঢাকার শুক্রবার। কিন্তু server প্রায়ই UTC-তে চলে, আর ঢাকা UTC-র ৬ ঘণ্টা আগে। Time zone-এর এই ফাঁকে bug লুকায়। vi.setSystemTime দিয়ে আমরা ঠিক সেই সীমার মুহূর্তগুলো বেছে নিই।

const dhakaWeekday = new Intl.DateTimeFormat('en-US', { timeZone: 'Asia/Dhaka', weekday: 'short' });

export function isFridayInDhaka(at: Date): boolean {
  return dhakaWeekday.format(at) === 'Fri';
}

it('Friday in Dhaka adds 5%, even when UTC still says Thursday', () => {
  vi.setSystemTime(new Date('2026-11-05T18:30:00Z')); // ঢাকায় শুক্রবার রাত ১২:৩০
  expect(cartTotals([tel(1)], 'EID10').discount).toBe(14250);
});

it('no Friday discount at 23:59 Thursday in Dhaka', () => {
  vi.setSystemTime(new Date('2026-11-05T17:59:00Z')); // ঢাকায় বৃহস্পতিবার রাত ১১:৫৯
  expect(cartTotals([tel(1)], 'EID10').discount).toBe(9500);
});

হিসাবটি নিজে মিলিয়ে নিন। তেলের দাম 95000 পয়সা। শুক্রবারে ১০% + ৫% = ১৫%, 95000 × 15 ÷ 100 = 14250. বৃহস্পতিবারে শুধু ১০%, 9500. ১৮:৩০ UTC + ৬ ঘণ্টা = পরের দিন ০০:৩০, তাই ঢাকায় শুক্রবার। এবার কেউ “সহজ” করতে isFridayInDhaka-কে at.getUTCDay() === 5 বানালেন। সত্যিকারের ফল:

 FAIL  src/shop/cart.test.ts > cartTotals > Friday in Dhaka adds 5%, even when UTC still says Thursday
AssertionError: expected 9500 to be 14250 // Object.is equality

- Expected
+ Received

- 14250
+ 9500

 ❯ src/shop/cart.test.ts:43:52
…
      Tests  1 failed | 5 passed (6)

খেয়াল করুন, ছয়টির মধ্যে শুধু একটি test ভেঙেছে, আর সেটিই এই সীমার test. দিনের মাঝখানের একটি সময় দিয়ে test লিখলে UTC আর ঢাকা একই দিন বলত, আর ভুলটি production-এ শুক্রবার রাতে প্রথম ছয় ঘণ্টা ধরে চুপচাপ চলত। beforeEach-এ ঘড়ি একটি নির্দিষ্ট সময়ে বসানো আছে বলে বাকি test-গুলো সপ্তাহের কোন দিনে চালানো হলো তার ওপর নির্ভর করে না। নইলে শুক্রবারে CI চালালে “coupon” test হঠাৎ ভাঙত।

৮ · Snapshot — inline, ফাইল, update আর অন্ধ অনুমোদন

Snapshot test প্রথমবার ফলটি লিখে রাখে, আর পরের প্রতিবার নতুন ফলকে সেই লেখার সাথে মেলায়। এটি characterization test-এর একটি সহজ রূপ: “এখন যা আছে, সেটিই যেন থাকে।” দুই ধরন আছে। Inline snapshot ফলটি test ফাইলের ভেতরেই লেখে, আর ফাইল snapshot পাশের __snapshots__ folder-এ .snap ফাইলে রাখে।

test('receipt text (inline snapshot)', () => {
  expect(renderReceipt(lines, totals)).toMatchInlineSnapshot();
});

test('receipt model (file snapshot)', () => {
  expect(receiptModel(lines, totals)).toMatchSnapshot();
});

প্রথম run-এ reporter বলল Snapshots 2 written. আর Vitest আমাদের test ফাইলটি নিজেই বদলে দিল, ফাঁকা বন্ধনীর ভেতরে রসিদের লেখা বসিয়ে:

test('receipt text (inline snapshot)', () => {
  expect(renderReceipt(lines, totals)).toMatchInlineSnapshot(`
    "chal-5kg x2  ৮৪০.০০৳
    dal-1kg x1  ১৪০.০০৳
    ছাড়      -৯৮.০০৳
    ডেলিভারি  ৬০.০০৳
    মোট      ৯৪২.০০৳"
  `);
});

ছোট আর মানুষের পড়ার মতো ফলের জন্য inline snapshot চমৎকার। Review-এর সময় পাশেই দেখা যায় কী চাওয়া হয়েছে। ফাইল snapshot-টি ৩৬ লাইনের একটি .snap ফাইল হলো, যেখানে রসিদের পুরো object আছে। এবার আসল বিপদটি দেখুন।

একটি সত্যিকারের অন্ধ অনুমোদন

আমরা ইচ্ছা করে receipt.ts-এ একটি bug ঢোকালাম: linePaisa: l.unitPaisa * l.qty-এর জায়গায় linePaisa: l.unitPaisa. মানে ২ প্যাকেট চালের লাইনের দাম এক প্যাকেটের সমান। Snapshot ঠিকই ধরল:

 FAIL  src/shop/receipt.test.ts > receipt model (file snapshot)
Error: Snapshot `receipt model (file snapshot) 1` mismatched

- Expected
+ Received

@@ -7,11 +7,11 @@
      "total": "৯৪২.০০৳",
    },
    "lines": [
      {
        "label": "৮৪০.০০৳",
-       "linePaisa": 84000,
+       "linePaisa": 42000,
        "qty": 2,
        "sku": "chal-5kg",
        "unitPaisa": 42000,
      },
      {
…
  Snapshots  1 failed

এখন কল্পনা করুন, একজন ব্যস্ত developer এই লাল দেখে ভাবলেন, “আমি তো রসিদের কোড বদলেছি, snapshot তো বদলাবেই।” তিনি চাপলেন:

$ npx vitest run src/shop/receipt.test.ts --update

 RUN  v5.1.0 ~/bazarghar

  Snapshots  1 updated
 Test Files  1 passed (1)
      Tests  2 passed (2)

সব সবুজ। .snap ফাইলে এখন "linePaisa": 42000 লেখা, অর্থাৎ ভুলটিই এখন “প্রত্যাশিত”। পরের যে মানুষ bug ঠিক করবেন, তাঁর test-ই লাল হবে। আমাদের snapshot মাত্র ৩৬ লাইনের, আর diff-এ বদলটি একটি লাইনে। বাস্তবের component বা API-র snapshot প্রায়ই কয়েকশো লাইনের হয়, আর review-এ সেই diff কেউ লাইন ধরে পড়েন না। একে অনেকে snapshot fatigue বলেন।

৯ · Coverage, type test, গতি আর Jest থেকে আসা

Coverage — v8 দিয়ে

Code coverage দেখায় test চলার সময় কোডের কোন অংশ অন্তত একবার চলেছে। কতটুকু coverage যথেষ্ট আর কেন ১০০% লক্ষ্য বিপজ্জনক, সেই দর্শন আছে পর্ব ৭২-এ। এখানে শুধু মাপা আর পড়া। সত্যিকারের run:

$ npx vitest run --coverage
 RUN  v5.1.0 ~/bazarghar
      Coverage enabled with v8

 Test Files  5 passed (5)
      Tests  29 passed (29)

 % Coverage report from v8
----------------|---------|----------|---------|---------|-------------------
File            | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------------|---------|----------|---------|---------|-------------------
All files       |   92.75 |    84.84 |   94.11 |   94.73 |
 cart.ts        |     100 |      100 |     100 |     100 |
 money.ts       |     100 |      100 |     100 |     100 |
 order.ts       |     100 |      100 |     100 |     100 |
 receipt.ts     |     100 |      100 |     100 |     100 |
 reservation.ts |   95.23 |     62.5 |     100 |     100 | 10-28
 sms.ts         |       0 |        0 |       0 |       0 | 3-9
----------------|---------|----------|---------|---------|-------------------
Statements   : 92.75% ( 64/69 )
Branches     : 84.84% ( 28/33 )
Functions    : 94.11% ( 16/17 )
Lines        : 94.73% ( 54/57 )

দুটি জিনিস পড়তে শিখুন। প্রথমত, sms.ts ০%. এটি ভালো খবর: test কখনো আসল SMS কোড চালায়নি। কিন্তু এর মানে sendSms-এর নিজের কোনো যাচাই এখনো নেই। HTTP-র নকল server দিয়ে সেই যাচাই আসবে পর্ব ৭৭-এ। দ্বিতীয়ত, reservation.ts-এ প্রতিটি লাইন চলেছে, তবু branch 62.5%. stock[sku] ?? 0-এর “নেই” দিক, বা onExpire?.()-এর “callback নেই” দিক কখনো চলেনি। লাইন চলা আর প্রতিটি পথ চলা আলাদা জিনিস।

সংখ্যাগুলো নিজে হিসাব করুন, পরীক্ষায় এমন প্রশ্ন আসে:

খেয়াল করুন, 84.848…% রিপোর্টে 84.84, আর 94.736…% রিপোর্টে 94.73. মানে এই রিপোর্ট দুই দশমিকে কেটে দেখায়, গোল করে না। Statements-এর 92.7536 কেটে 92.75, গোল করলেও তাই। Coverage-এর সীমা (threshold) ধরলে এই কাটার কারণে ৮৫% সীমায় 84.84 আটকে যাবে। আর >= বদলে > লিখলে কী হয়, পর্ব ২৯-এর অনুশীলনে দেখেছিলেন: সব লাইন চলেও ভুল ধরা পড়েনি। ১০০% coverage মানে প্রতিটি লাইন অন্তত একবার চলেছে, প্রতিটি নিয়ম যাচাই হয়েছে এমন নয়।

Type test — একটি ছোট নোট

Vitest TypeScript-এর type-ও test করতে পারে। .test-d.ts ফাইলে expectTypeOf লিখে vitest --typecheck চালাতে হয়। এখানে কোড চলে না, শুধু type checker দেখে।

import { expectTypeOf, test } from 'vitest';
import { cartTotals, type Totals } from './cart';
import { parseTaka } from './money';

test('public types stay stable', () => {
  expectTypeOf(cartTotals).returns.toEqualTypeOf<Totals>();
  expectTypeOf(parseTaka).parameter(0).toBeString();
  expectTypeOf(parseTaka).returns.toBeNumber();
  // @ts-expect-error: পয়সা সংখ্যা, লেখা নয়
  cartTotals([{ sku: 'x', unitPaisa: '420', qty: 1 }]);
});

সত্যিকারের run-এ Vitest প্রথমেই জানাল: Testing types with tsc and vue-tsc is an experimental feature. তারপর Type Errors no errors. ইচ্ছা করে toBeNumber-কে toBeString বানালে এলো TypeCheckError: This expression is not callable. Type 'ExpectString<number>' has no call signatures. বার্তাটি একটু অদ্ভুত, কারণ type test-এর ব্যর্থতা আসলে একটি compile error. Feature-টি এখনো পরীক্ষামূলক, তাই version pin করে ব্যবহার করুন। Type-এর মূল কথা আছে পর্ব ০৬-এ।

গতি — ২০০টি test, একবারের মাপ

Unit test-এর বড় শক্তি গতি। আমরা test.each দিয়ে ২০০টি সারির একটি ফাইল বানিয়েছি: প্রতিটিতে একটি পয়সার মান লেখায় বদলে আবার parseTaka দিয়ে ফেরানো, আর formatTaka-র শেষে ৳ আছে কি না দেখা।

$ npx vitest run src/shop/bulk.test.ts
 Test Files  1 passed (1)
      Tests  200 passed (200)
   Duration  153ms (import 40%, transform 36%, tests 18%, worker 6%)

$ npx vitest run
 Test Files  6 passed (6)
      Tests  229 passed (229)
   Duration  165ms (import 55%, tests 18%, transform 16%, worker 10%)

153 ms-এর ১৮% প্রায় 27.5 ms গেছে test-এর নিজের কাজে, মানে প্রতি test-এ গড়ে প্রায় 0.14 ms. বাকিটা ফাইল import আর অনুবাদ। npx চালু হওয়াসহ পুরো কমান্ডের দেয়াল-ঘড়ির সময় মেপে পেয়েছি 0.86 s. এগুলো এক কম্পিউটারে একবারের মাপ, কোনো সাধারণ benchmark নয়। আসল শিক্ষাটি অনুপাতে: শুদ্ধ হিসাবের test-এ খরচ মূলত শুরুর, তাই test বাড়লেও সময় প্রায় একই থাকে। এর উল্টো ছবি পাবেন পর্ব ৭৬-এ, যেখানে একটি browser test-ই সেকেন্ড নেয়।

Jest থেকে আসা — সতর্ক একটি নোট

Vitest-এর API ইচ্ছা করেই Jest-এর কাছাকাছি: describe, it, expect, snapshot প্রায় একই। তবে Vitest-এর migration পাতায় কিছু পার্থক্য লেখা আছে, আর আপনার প্রজেক্টে আরও থাকতে পারে:

• Global নেই: Jest-এ describe নিজে থেকে পাওয়া যায়। Vitest-এ import করতে হয়, অথবা config-এ globals: true দিতে হয়।
• Module mock: jest.mock-এর factory যা ফেরত দেয় তা default export হয়। vi.mock-এ প্রতিটি export নাম ধরে দিতে হয়, যেমন { default: ... }. jest.requireActual-এর জায়গায় await vi.importActual.
• done callback নেই: Async test async ফাংশন বা promise দিয়ে লিখতে হয়। Jest-এর legacy timer-ও নেই।
• mockReset-এর আচরণ আলাদা: অংশ ৬-এ দেখেছেন।

ছোট প্রজেক্টে পরিবর্তন প্রায়ই নাম বদলের কাজ, কিন্তু বড় প্রজেক্টে custom matcher, setup ফাইল আর snapshot serializer মিলিয়ে কাজ বাড়ে। Jest-ও সক্রিয়ভাবে চলছে, লেখার সময়ে npm-এ তার version 30.5.2. Vite-এর বাইরের পুরোনো স্থির প্রজেক্টে শুধু “নতুন” বলে বদলানোর যুক্তি দুর্বল। Vite প্রজেক্টে নতুন করে শুরু করলে Vitest স্বাভাবিক পছন্দ।

১০ · AI-এর যুগে — AI-এর লেখা test যাচাই

AI-কে “এই ফাংশনের test লিখে দাও” বললে সে দ্রুত অনেকগুলো test দেয়, আর সাধারণত সব সবুজ। বিপদ ঠিক সেখানেই। সবুজ test প্রমাণ করে না যে test কিছু যাচাই করছে।

AI-এর লেখা test হাতে পেলে — যাচাইয়ের চেকলিস্ট

• নিজে চালিয়েছি, আর reporter-এ test-এর সংখ্যা মিলিয়েছি, কোনো skipped নেই
• কোডে ইচ্ছা করে একটি ভুল (যেমন >= থেকে >) ঢুকিয়ে দেখেছি, অন্তত একটি test লাল হয়েছে
• প্রত্যাশিত মানগুলো হাতে হিসাব করা সংখ্যা, কোডের সূত্রের কপি নয়
• নকল শুধু সীমানায়; mock-এর লাইন মুছলে test network-এ যাওয়ার চেষ্টা করে কি না, জানি
• .only নেই, প্রতিটি async assertion-এ await আছে, fake timer শেষে আসল timer-এ ফেরে
• package.json-এর diff পড়েছি, অপ্রয়োজনীয় package নেই, আর কোনো আসল key বা নম্বর নেই