เครื่องมือสร้างไฟล์ตั้งค่า Jest

ตัวอย่างผลลัพธ์: โปรเจกต์ React + TypeScript

module.exports = {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  setupFilesAfterEach: ["<rootDir>/jest.setup.ts"],
  moduleNameMapper: {
    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
    "\\.(jpg|jpeg|png|gif|svg)$": "<rootDir>/__mocks__/fileMock.js",
    "^@/(.*)$": "<rootDir>/src/$1"
  },
  testPathIgnorePatterns: ["/node_modules/", "/dist/", "/build/"],
  transform: {
    "^.+\\.tsx?$": ["ts-jest", { tsconfig: "tsconfig.test.json" }]
  },
  collectCoverageFrom: [
    "src/**/*.{ts,tsx}",
    "!src/**/*.d.ts",
    "!src/**/*.stories.*"
  ],
  coverageThreshold: {
    global: { branches: 80, functions: 80, lines: 85, statements: 85 }
  }
};

คู่มือการตัดสินใจ: ควรเลือกสภาพแวดล้อมใด?

ตารางสรุปทรานส์ฟอร์เมอร์

เกณฑ์ความครอบคลุม: ควรใช้ตัวเลขเท่าไหร่?

• เส้นทางสำคัญ/ไลบรารี: บรรทัดมากกว่า 90% สาขามากกว่า 85%
• ทีมพัฒนาฟีเจอร์: บรรทัด 80% สาขา 70%
• UI ที่เปลี่ยนแปลงเร็ว: บรรทัด 60–70% ตั้งเป้าให้สูงขึ้นสำหรับตรรกะทางธุรกิจ และต่ำลงสำหรับเลย์เอาต์
• ต้นแบบ (prototype): ปิดใช้งานเกณฑ์ทั้งหมด แล้วติดตามความครอบคลุมเป็นตัวเลข ไม่ใช่เป็นเกต

ข้อผิดพลาดที่พบบ่อย

• ใช้ jsdom กับโค้ด Node ล้วน ๆ ทำให้การทดสอบช้าลงโดยไม่ได้ประโยชน์อะไร, ให้เปลี่ยนไปใช้ node
• ลืมใส่ transformIgnorePatterns สำหรับแพ็กเกจ ESM แพ็กเกจสมัยใหม่มาในรูปแบบ ESM เท่านั้น จึงต้องบอก Jest ให้แปลงพวกมัน
• ม็อกรูปภาพ/CSS โดยไม่มีตัวแมป เมื่อ import ไฟล์ .png ในการทดสอบ Jest จะล้มเหลวหากไม่มีโมดูลม็อก
• ตั้งค่า clearMocks เป็น false ม็อกจะรั่วข้ามการทดสอบ และความล้มเหลวจะกลายเป็นแบบคาดเดาไม่ได้ ควรเปิดใช้งานไว้เป็นค่าเริ่มต้น