ไทย

ฝึกฝนรูปแบบการทดสอบ Jest ขั้นสูงเพื่อสร้างซอฟต์แวร์ที่เชื่อถือได้และดูแลรักษาง่ายขึ้น สำรวจเทคนิคต่างๆ เช่น mocking, snapshot testing และ custom matchers สำหรับทีมพัฒนาระดับโลก

Jest: รูปแบบการทดสอบขั้นสูงสำหรับซอฟต์แวร์ที่แข็งแกร่ง

ในวงการพัฒนาซอฟต์แวร์ที่เปลี่ยนแปลงอย่างรวดเร็วในปัจจุบัน การทำให้โค้ดเบสของคุณเชื่อถือได้และมีเสถียรภาพเป็นสิ่งสำคัญยิ่ง แม้ว่า Jest จะกลายเป็นมาตรฐานสำหรับการทดสอบ JavaScript ไปแล้ว แต่การก้าวไปไกลกว่าการทดสอบ unit test พื้นฐานจะช่วยปลดล็อกระดับความมั่นใจใหม่ในแอปพลิเคชันของคุณ บทความนี้จะเจาะลึกรูปแบบการทดสอบ Jest ขั้นสูงที่จำเป็นสำหรับการสร้างซอฟต์แวร์ที่แข็งแกร่ง เพื่อตอบสนองต่อนักพัฒนาระดับโลก

ทำไมต้องไปไกลกว่า Unit Test พื้นฐาน?

Unit test พื้นฐานจะตรวจสอบส่วนประกอบแต่ละส่วนแบบแยกเดี่ยว อย่างไรก็ตาม แอปพลิเคชันในโลกแห่งความเป็นจริงเป็นระบบที่ซับซ้อนซึ่งส่วนประกอบต่างๆ มีปฏิสัมพันธ์กัน รูปแบบการทดสอบขั้นสูงจะช่วยจัดการกับความซับซ้อนเหล่านี้โดยทำให้เราสามารถ:

การเรียนรู้ Mocking และ Spies อย่างเชี่ยวชาญ

Mocking เป็นสิ่งสำคัญสำหรับการแยกส่วนที่กำลังทดสอบ (unit under test) ออกมา โดยการแทนที่ส่วนที่ต้องพึ่งพา (dependencies) ด้วยตัวแทนที่ควบคุมได้ Jest มีเครื่องมือที่ทรงพลังสำหรับเรื่องนี้:

jest.fn(): พื้นฐานของ Mocks และ Spies

jest.fn() สร้างฟังก์ชันจำลอง (mock function) คุณสามารถติดตามการเรียกใช้งาน อาร์กิวเมนต์ และค่าที่ส่งคืนได้ ซึ่งเป็นส่วนประกอบพื้นฐานสำหรับกลยุทธ์การทำ mocking ที่ซับซ้อนยิ่งขึ้น

ตัวอย่าง: การติดตามการเรียกใช้ฟังก์ชัน

// component.js
export const fetchData = () => {
  // Simulates an API call
  return Promise.resolve({ data: 'some data' });
};

export const processData = async (fetcher) => {
  const result = await fetcher();
  return `Processed: ${result.data}`;
};

// component.test.js
import { processData } from './component';

test('should process data correctly', async () => {
  const mockFetcher = jest.fn().mockResolvedValue({ data: 'mocked data' });
  const result = await processData(mockFetcher);
  expect(result).toBe('Processed: mocked data');
  expect(mockFetcher).toHaveBeenCalledTimes(1);
  expect(mockFetcher).toHaveBeenCalledWith();
});

jest.spyOn(): การสังเกตการณ์โดยไม่แทนที่

jest.spyOn() ช่วยให้คุณสามารถสังเกตการณ์การเรียกใช้เมธอดของอ็อบเจกต์ที่มีอยู่ได้ โดยไม่จำเป็นต้องแทนที่การทำงานของมัน นอกจากนี้คุณยังสามารถ mock การทำงานของมันได้หากจำเป็น

ตัวอย่าง: การ Spy บนเมธอดของโมดูล

// logger.js
export const logInfo = (message) => {
  console.log(`INFO: ${message}`);
};

// service.js
import { logInfo } from './logger';

export const performTask = (taskName) => {
  logInfo(`Starting task: ${taskName}`);
  // ... task logic ...
  logInfo(`Task ${taskName} completed.`);
};

// service.test.js
import { performTask } from './service';
import * as logger from './logger';

test('should log task start and completion', () => {
  const logSpy = jest.spyOn(logger, 'logInfo');

  performTask('backup');

  expect(logSpy).toHaveBeenCalledTimes(2);
  expect(logSpy).toHaveBeenCalledWith('Starting task: backup');
  expect(logSpy).toHaveBeenCalledWith('Task backup completed.');

  logSpy.mockRestore(); // Important to restore the original implementation
});

การ Mock การนำเข้าโมดูล (Module Imports)

ความสามารถในการ mock โมดูลของ Jest นั้นกว้างขวางมาก คุณสามารถ mock ทั้งโมดูลหรือเฉพาะส่วนที่ export ออกมาก็ได้

ตัวอย่าง: การ Mock API Client ภายนอก

// api.js
import axios from 'axios';

export const getUser = async (userId) => {
  const response = await axios.get(`/api/users/${userId}`);
  return response.data;
};

// user-service.js
import { getUser } from './api';

export const getUserFullName = async (userId) => {
  const user = await getUser(userId);
  return `${user.firstName} ${user.lastName}`;
};

// user-service.test.js
import { getUserFullName } from './user-service';
import * as api from './api';

// Mock the entire api module
jest.mock('./api');

test('should get full name using mocked API', async () => {
  // Mock the specific function from the mocked module
  api.getUser.mockResolvedValue({ id: 1, firstName: 'Ada', lastName: 'Lovelace' });

  const fullName = await getUserFullName(1);

  expect(fullName).toBe('Ada Lovelace');
  expect(api.getUser).toHaveBeenCalledTimes(1);
  expect(api.getUser).toHaveBeenCalledWith(1);
});

Auto-mocking เทียบกับ Manual Mocking

Jest จะทำการ mock โมดูลของ Node.js โดยอัตโนมัติ สำหรับ ES modules หรือโมดูลที่สร้างขึ้นเอง คุณอาจต้องใช้ jest.mock() และเพื่อการควบคุมที่มากขึ้น คุณสามารถสร้างไดเรกทอรี __mocks__ ได้

การกำหนดการทำงานของ Mock (Mock Implementations)

คุณสามารถกำหนดการทำงานแบบกำหนดเองสำหรับ mock ของคุณได้

ตัวอย่าง: การ Mock ด้วยการกำหนดการทำงานเอง

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// calculator.js
import { add, subtract } from './math';

export const calculate = (operation, a, b) => {
  if (operation === 'add') {
    return add(a, b);
  } else if (operation === 'subtract') {
    return subtract(a, b);
  }
  return null;
};

// calculator.test.js
import { calculate } from './calculator';
import * as math from './math';

// Mock the entire math module
jest.mock('./math');

test('should perform addition using mocked math add', () => {
  // Provide a mock implementation for the 'add' function
  math.add.mockImplementation((a, b) => a + b + 10); // Add 10 to the result
  math.subtract.mockReturnValue(5); // Mock subtract as well

  const result = calculate('add', 5, 3);

  expect(math.add).toHaveBeenCalledWith(5, 3);
  expect(result).toBe(18); // 5 + 3 + 10

  const subResult = calculate('subtract', 10, 2);
  expect(math.subtract).toHaveBeenCalledWith(10, 2);
  expect(subResult).toBe(5);
});

Snapshot Testing: การรักษาสภาพของ UI และการตั้งค่า

Snapshot test เป็นฟีเจอร์ที่ทรงพลังสำหรับการบันทึกผลลัพธ์ของคอมโพเนนต์หรือการตั้งค่าของคุณ มีประโยชน์อย่างยิ่งสำหรับการทดสอบ UI หรือการตรวจสอบโครงสร้างข้อมูลที่ซับซ้อน

Snapshot Testing ทำงานอย่างไร

ครั้งแรกที่ snapshot test ทำงาน Jest จะสร้างไฟล์ .snap ที่มีข้อมูล serialized ของค่าที่ทดสอบ ในการรันครั้งต่อๆ ไป Jest จะเปรียบเทียบผลลัพธ์ปัจจุบันกับ snapshot ที่เก็บไว้ หากแตกต่างกัน การทดสอบจะล้มเหลว ซึ่งจะแจ้งเตือนให้คุณทราบถึงการเปลี่ยนแปลงที่ไม่คาดคิด สิ่งนี้มีค่าอย่างยิ่งในการตรวจจับการถดถอย (regression) ในคอมโพเนนต์ UI ในภูมิภาคหรือภาษาต่างๆ

ตัวอย่าง: การทำ Snapshot ของ React Component

สมมติว่าคุณมี React component:

// UserProfile.js
import React from 'react';

const UserProfile = ({ name, email, isActive }) => (
  <div>
    <h2>{name}</h2>
    <p><strong>Email:</strong> {email}</p>
    <p><strong>Status:</strong> {isActive ? 'Active' : 'Inactive'}</p>
  </div>
);

export default UserProfile;

// UserProfile.test.js
import React from 'react';
import renderer from 'react-test-renderer'; // For React component snapshots
import UserProfile from './UserProfile';

test('renders UserProfile correctly', () => {
  const user = {
    name: 'Jane Doe',
    email: 'jane.doe@example.com',
    isActive: true,
  };
  const component = renderer.create(
    <UserProfile {...user} />
  );
  const tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

test('renders inactive UserProfile correctly', () => {
  const user = {
    name: 'John Smith',
    email: 'john.smith@example.com',
    isActive: false,
  };
  const component = renderer.create(
    <UserProfile {...user} />
  );
  const tree = component.toJSON();
  expect(tree).toMatchSnapshot('inactive user profile'); // Named snapshot
});

หลังจากรันเทสต์แล้ว Jest จะสร้างไฟล์ UserProfile.test.js.snap ขึ้นมา เมื่อคุณอัปเดตคอมโพเนนต์ คุณจะต้องตรวจสอบการเปลี่ยนแปลงและอาจต้องอัปเดต snapshot โดยการรัน Jest ด้วยแฟล็ก --updateSnapshot หรือ -u

แนวทางปฏิบัติที่ดีที่สุดสำหรับ Snapshot Testing

Custom Matchers: การเพิ่มความสามารถในการอ่านเทสต์

matchers ที่มีมาในตัวของ Jest นั้นมีมากมาย แต่บางครั้งคุณอาจต้องการยืนยันเงื่อนไขเฉพาะที่ไม่มีครอบคลุม Custom matchers ช่วยให้คุณสร้างตรรกะการยืนยันผลของคุณเองได้ ทำให้เทสต์ของคุณสื่อความหมายได้ดีขึ้นและอ่านง่ายขึ้น

การสร้าง Custom Matchers

คุณสามารถขยายอ็อบเจกต์ expect ของ Jest ด้วย matchers ของคุณเองได้

ตัวอย่าง: การตรวจสอบรูปแบบอีเมลที่ถูกต้อง

ในไฟล์ตั้งค่า Jest ของคุณ (เช่น jest.setup.js ที่กำหนดค่าใน jest.config.js):

// jest.setup.js

expect.extend({
  toBeValidEmail(received) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    const pass = emailRegex.test(received);

    if (pass) {
      return {
        message: () => `expected ${received} not to be a valid email`,
        pass: true,
      };
    } else {
      return {
        message: () => `expected ${received} to be a valid email`,
        pass: false,
      };
    }
  },
});

// In your jest.config.js
// module.exports = { setupFilesAfterEnv: ['/jest.setup.js'] };

ในไฟล์เทสต์ของคุณ:

// validation.test.js

test('should validate email formats', () => {
  expect('test@example.com').toBeValidEmail();
  expect('invalid-email').not.toBeValidEmail();
  expect('another.test@sub.domain.co.uk').toBeValidEmail();
});

ประโยชน์ของ Custom Matchers

การทดสอบการทำงานแบบ Asynchronous

JavaScript มีการทำงานแบบ asynchronous เป็นอย่างมาก Jest ให้การสนับสนุนที่ยอดเยี่ยมสำหรับการทดสอบ promises และ async/await

การใช้ async/await

นี่เป็นวิธีที่ทันสมัยและอ่านง่ายที่สุดในการทดสอบโค้ด async

ตัวอย่าง: การทดสอบฟังก์ชัน Async

// dataService.js
export const fetchUserData = async (userId) => {
  // Simulate fetching data after a delay
  await new Promise(resolve => setTimeout(resolve, 50));
  if (userId === 1) {
    return { id: 1, name: 'Alice' };
  } else {
    throw new Error('User not found');
  }
};

// dataService.test.js
import { fetchUserData } from './dataService';

test('fetches user data correctly', async () => {
  const user = await fetchUserData(1);
  expect(user).toEqual({ id: 1, name: 'Alice' });
});

test('throws error for non-existent user', async () => {
  await expect(fetchUserData(2)).rejects.toThrow('User not found');
});

การใช้ .resolves และ .rejects

matchers เหล่านี้ช่วยให้การทดสอบการ resolve และ reject ของ promise ง่ายขึ้น

ตัวอย่าง: การใช้ .resolves/.rejects

// dataService.test.js (continued)

test('fetches user data with .resolves', () => {
  return expect(fetchUserData(1)).resolves.toEqual({ id: 1, name: 'Alice' });
});

test('throws error for non-existent user with .rejects', () => {
  return expect(fetchUserData(2)).rejects.toThrow('User not found');
});

การจัดการ Timers

สำหรับฟังก์ชันที่ใช้ setTimeout หรือ setInterval Jest มีเครื่องมือควบคุม timer

ตัวอย่าง: การควบคุม Timers

// delayedGreeter.js
export const greetAfterDelay = (name, callback) => {
  setTimeout(() => {
    callback(`Hello, ${name}!`);
  }, 1000);
};

// delayedGreeter.test.js
import { greetAfterDelay } from './delayedGreeter';

jest.useFakeTimers(); // Enable fake timers

test('greets after delay', () => {
  const mockCallback = jest.fn();
  greetAfterDelay('World', mockCallback);

  // Advance timers by 1000ms
  jest.advanceTimersByTime(1000);

  expect(mockCallback).toHaveBeenCalledTimes(1);
  expect(mockCallback).toHaveBeenCalledWith('Hello, World!');
});

// Restore real timers if needed elsewhere
jest.useRealTimers();

การจัดระเบียบและโครงสร้างของเทสต์

เมื่อชุดการทดสอบ (test suite) ของคุณใหญ่ขึ้น การจัดระเบียบจะกลายเป็นสิ่งสำคัญอย่างยิ่งต่อการบำรุงรักษา

การใช้ Describe Blocks และ It Blocks

ใช้ describe เพื่อจัดกลุ่มเทสต์ที่เกี่ยวข้องกัน และใช้ it (หรือ test) สำหรับแต่ละกรณีทดสอบ โครงสร้างนี้จะสะท้อนถึงความเป็นโมดูลของแอปพลิเคชัน

ตัวอย่าง: เทสต์ที่มีโครงสร้าง

describe('User Authentication Service', () => {
  let authService;

  beforeEach(() => {
    // Setup mocks or service instances before each test
    authService = require('./authService');
    jest.spyOn(authService, 'login').mockImplementation(() => Promise.resolve({ token: 'fake_token' }));
  });

  afterEach(() => {
    // Clean up mocks
    jest.restoreAllMocks();
  });

  describe('login functionality', () => {
    it('should successfully log in a user with valid credentials', async () => {
      const result = await authService.login('user@example.com', 'password123');
      expect(result.token).toBeDefined();
      // ... more assertions ...
    });

    it('should fail login with invalid credentials', async () => {
      jest.spyOn(authService, 'login').mockRejectedValue(new Error('Invalid credentials'));
      await expect(authService.login('user@example.com', 'wrong_password')).rejects.toThrow('Invalid credentials');
    });
  });

  describe('logout functionality', () => {
    it('should clear user session', async () => {
      // Test logout logic...
    });
  });
});

Setup และ Teardown Hooks

Hook เหล่านี้จำเป็นสำหรับการตั้งค่าข้อมูลจำลอง, การเชื่อมต่อฐานข้อมูล, หรือการล้างทรัพยากรระหว่างการทดสอบ

การทดสอบสำหรับผู้ใช้งานทั่วโลก

เมื่อพัฒนาแอปพลิเคชันสำหรับผู้ใช้งานทั่วโลก ข้อควรพิจารณาในการทดสอบจะขยายกว้างขึ้น:

Internationalization (i18n) และ Localization (l10n)

ตรวจสอบให้แน่ใจว่า UI และข้อความของคุณปรับเปลี่ยนตามภาษาและรูปแบบของภูมิภาคต่างๆ ได้อย่างถูกต้อง

ตัวอย่าง: การทดสอบการจัดรูปแบบวันที่ตามท้องถิ่น

// dateUtils.js
export const formatLocalizedDate = (date, locale) => {
  return new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'numeric', day: 'numeric' }).format(date);
};

// dateUtils.test.js
import { formatLocalizedDate } from './dateUtils';

test('formats date correctly for US locale', () => {
  const date = new Date(2023, 10, 15); // November 15, 2023
  expect(formatLocalizedDate(date, 'en-US')).toBe('11/15/2023');
});

test('formats date correctly for German locale', () => {
  const date = new Date(2023, 10, 15);
  expect(formatLocalizedDate(date, 'de-DE')).toBe('15.11.2023');
});

การตระหนักถึงโซนเวลา (Time Zone)

ทดสอบว่าแอปพลิเคชันของคุณจัดการกับโซนเวลาต่างๆ อย่างไร โดยเฉพาะฟีเจอร์ต่างๆ เช่น การจัดตารางเวลา หรือการอัปเดตแบบเรียลไทม์ การ mock นาฬิกาของระบบหรือการใช้ไลบรารีที่จัดการเกี่ยวกับโซนเวลาอาจเป็นประโยชน์

ความแตกต่างทางวัฒนธรรมในข้อมูล

พิจารณาว่าตัวเลข สกุลเงิน และการแสดงข้อมูลอื่นๆ อาจถูกรับรู้หรือคาดหวังแตกต่างกันไปในแต่ละวัฒนธรรมอย่างไร Custom matchers สามารถมีประโยชน์อย่างยิ่งในกรณีนี้

เทคนิคและกลยุทธ์ขั้นสูง

Test-Driven Development (TDD) และ Behavior-Driven Development (BDD)

Jest เข้ากันได้ดีกับหลักการ TDD (Red-Green-Refactor) และ BDD (Given-When-Then) เขียนเทสต์ที่อธิบายพฤติกรรมที่ต้องการก่อนที่จะเขียนโค้ดจริง สิ่งนี้ช่วยให้มั่นใจได้ว่าโค้ดถูกเขียนขึ้นโดยคำนึงถึงความสามารถในการทดสอบได้ตั้งแต่แรก

Integration Testing ด้วย Jest

แม้ว่า Jest จะเชี่ยวชาญด้าน unit test แต่ก็สามารถใช้สำหรับ integration test ได้เช่นกัน การ mock dependency ให้น้อยลง หรือการใช้เครื่องมืออย่างอ็อปชัน runInBand ของ Jest สามารถช่วยได้

ตัวอย่าง: การทดสอบการทำงานร่วมกับ API (แบบง่าย)

// apiService.js
import axios from 'axios';

const API_BASE_URL = 'https://api.example.com';

export const createProduct = async (productData) => {
  const response = await axios.post(`${API_BASE_URL}/products`, productData);
  return response.data;
};

// apiService.test.js (Integration test)
import axios from 'axios';
import { createProduct } from './apiService';

// Mock axios for integration tests to control the network layer
jest.mock('axios');

test('creates a product via API', async () => {
  const mockProduct = { id: 1, name: 'Gadget' };
  const responseData = { success: true, product: mockProduct };

  axios.post.mockResolvedValue({
    data: responseData,
    status: 201,
    headers: { 'content-type': 'application/json' },
  });

  const newProductData = { name: 'Gadget', price: 99.99 };
  const result = await createProduct(newProductData);

  expect(axios.post).toHaveBeenCalledWith(`${process.env.API_BASE_URL || 'https://api.example.com'}/products`, newProductData);
  expect(result).toEqual(responseData);
});

การทำงานแบบขนาน (Parallelism) และการกำหนดค่า

Jest สามารถรันเทสต์แบบขนานเพื่อเพิ่มความเร็วในการทำงานได้ คุณสามารถกำหนดค่านี้ได้ในไฟล์ jest.config.js ของคุณ ตัวอย่างเช่น การตั้งค่า maxWorkers จะเป็นการควบคุมจำนวนโปรเซสที่ทำงานขนานกัน

รายงานความครอบคลุม (Coverage Reports)

ใช้รายงานความครอบคลุม (coverage reporting) ที่มีมาในตัวของ Jest เพื่อระบุส่วนต่างๆ ของโค้ดเบสที่ยังไม่ถูกทดสอบ รันเทสต์ด้วย --coverage เพื่อสร้างรายงานโดยละเอียด

jest --coverage

การตรวจสอบรายงานความครอบคลุมจะช่วยให้แน่ใจว่ารูปแบบการทดสอบขั้นสูงของคุณครอบคลุมตรรกะที่สำคัญได้อย่างมีประสิทธิภาพ รวมถึงโค้ดที่เกี่ยวกับ internationalization และ localization ด้วย

สรุป

การเรียนรู้รูปแบบการทดสอบ Jest ขั้นสูงอย่างเชี่ยวชาญเป็นก้าวสำคัญในการสร้างซอฟต์แวร์ที่เชื่อถือได้ ดูแลรักษาง่าย และมีคุณภาพสูงสำหรับผู้ใช้งานทั่วโลก ด้วยการใช้ mocking, snapshot testing, custom matchers และเทคนิคการทดสอบแบบ asynchronous อย่างมีประสิทธิภาพ คุณจะสามารถเพิ่มความแข็งแกร่งให้กับชุดการทดสอบและได้รับความมั่นใจมากขึ้นในพฤติกรรมของแอปพลิเคชันของคุณในสถานการณ์และภูมิภาคที่หลากหลาย การนำรูปแบบเหล่านี้มาใช้ช่วยเสริมศักยภาพให้ทีมพัฒนาทั่วโลกสามารถส่งมอบประสบการณ์ผู้ใช้ที่ยอดเยี่ยมได้

เริ่มต้นนำเทคนิคขั้นสูงเหล่านี้มาใช้ในเวิร์กโฟลว์ของคุณตั้งแต่วันนี้ เพื่อยกระดับแนวปฏิบัติในการทดสอบ JavaScript ของคุณ

Jest: รูปแบบการทดสอบขั้นสูงสำหรับซอฟต์แวร์ที่แข็งแกร่ง | MLOG