TypeScript Academy · บทเรียน

การตั้งค่า Vitest/Jest สำหรับ TS

ติดตั้งและกำหนดค่า Vitest หรือ Jest สำหรับโครงการ TypeScript เขียนการทดสอบขนาดเล็ก และเรียกใช้การทดสอบ

บทเรียน 1 จาก 38 ขั้นตอน

การตั้งค่า Vitest/Jest สำหรับ TS เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 3 บทเรียน

บทนำ

เป้าหมาย: กำหนดค่า Vitest หรือ Jest สำหรับ TypeScript คุณจะติดตั้งแพ็กเกจที่จำเป็น เพิ่มการกำหนดค่า เขียนการทดสอบขนาดเล็กหนึ่งรายการ และเรียกใช้การทดสอบ

ติดตั้ง Vitest

Vitest ทำงานโดยอิงกับ Vite: เริ่มทำงานเร็ว ใช้ ESM เป็นหลัก และมี DX ที่ดี ติดตั้งพร้อมกับ @types/node เพื่อใช้ตัวแปรส่วนกลาง

npm install --save-dev vitest @vitest/ui @types/node

ตัวอย่าง Vitest

เพิ่ม vitest.config.ts เขียนการทดสอบขนาดเล็ก และเรียกใช้ด้วย npx vitest หรือสคริปต์ npm test

// vitest.config.ts
import { defineConfig } from "vitest/config";
export default defineConfig({
  test: { globals: true }
});

// src/sum.ts
export const sum = (a: number, b: number) => a + b;

// src/sum.test.ts
import { sum } from "./sum";
import { describe, expect, it } from "vitest";

describe("sum", () => {
  it("adds numbers", () => {
    expect(sum(2, 3)).toBe(5);
  });
});

ติดตั้ง Jest

Jest ต้องใช้ตัวแปลงสำหรับ TS ใช้ ts-jest เพื่อคอมไพล์การทดสอบทันทีขณะเรียกใช้

npm install --save-dev jest ts-jest @types/jest @types/node

ตัวอย่าง Jest

กำหนดค่า preset: "ts-jest" จากนั้น Jest จะเรียกใช้การทดสอบ .ts ได้โดยไม่ต้องมีขั้นตอนการสร้าง

// jest.config.js
module.exports = {
  preset: "ts-jest",
  testEnvironment: "node",
};

// src/sum.test.ts
import { sum } from "./sum";

test("adds numbers", () => {
  expect(sum(2, 3)).toBe(5);
});

สคริปต์

เพิ่มสคริปต์เพื่อให้เวิร์กโฟลว์ราบรื่น ใช้โหมดเฝ้าดูเพื่อรับผลตอบกลับอย่างรวดเร็วระหว่างพัฒนา

// package.json (scripts)
{
  "scripts": {
    "test": "vitest",
    "test:ui": "vitest --ui",
    "test:jest": "jest"
  }
}

คำถาม

ตรวจสอบอย่างรวดเร็ว: ในการตั้งค่า Jest + TS, ts-jest ทำหน้าที่อะไร

สรุปทบทวน

สรุปทบทวน: ทั้ง Vitest (ทำงานโดยอิงกับ Vite) และ Jest (มีการใช้งานอย่างแพร่หลาย) ทำงานร่วมกับ TS ได้ดี กำหนดค่าเพียงครั้งเดียว แล้วเรียกใช้การทดสอบในโหมดเฝ้าดูหรือ CI

เริ่มต้นได้ฟรี

เรียนรู้ TypeScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
101
บทเรียน
352

คำถามที่พบบ่อย

บทเรียน “การตั้งค่า Vitest/Jest สำหรับ TS” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การตั้งค่า Vitest/Jest สำหรับ TS” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การตั้งค่า Vitest/Jest สำหรับ TS”

ติดตั้งและกำหนดค่า Vitest หรือ Jest สำหรับโครงการ TypeScript เขียนการทดสอบขนาดเล็ก และเรียกใช้การทดสอบ คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน

บทเรียน “การตั้งค่า Vitest/Jest สำหรับ TS” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม

ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การตั้งค่า Vitest/Jest สำหรับ TS
  2. การกำหนดชนิดข้อมูลให้การทดสอบและม็อก; expectTypeOf
  3. ภาพรวมการกำหนดชนิดข้อมูลการทดสอบ E2E (Playwright/Cypress)
← กลับไปที่ TypeScript Academy