#vitest

This Week In React #296: React 19.3, DevTools, Next.js, cn, Maps, Effective-RSC, Vidact, uf

React 19.3 và bản beta của React DevTools 5.0 đã được ra mắt với các cải tiến về hiệu năng. Next.js 15.1.0 giới thiệu tính năng mới cho app router, giúp tối ưu hóa hiệu ứng loading. Lỗi hydration issue trong React Server Components (RSC) được phát hiện liên quan đến việc sử dụng hook use client không phù hợp. Vidact là thư viện mới giúp quản lý hiệu ứng video trong React, với API đơn giản hơn. Các kỹ thuật tối ưu RSC với "cn" utility và uf pattern có thể cải thiện đáng kể hiệu ứng loading.

Bài viết cung cấp cập nhật mới nhất về React 19.3, DevTools, Next.js và các công cụ phát triển quan trọng khác giúp lập trình viên nắm bắt xu hướng và tối ưu workflow hiệu quả.

Tales from the Void: September 2026 Recap

Tháng 9 năm 2026 chứng kiến sự ra mắt của Vite+ 1.0 cùng với Vitest 5, mang đến những cải tiến về hiệu năng và trải nghiệm phát triển. Oxlint và tsgolint đã tăng tốc type-aware linting đáng kể so với các công cụ trước đây. Bundled Dev Mode đang đạt được tiến bộ quan trọng, hứa hẹn sẽ tối ưu hóa quá trình phát triển ứng dụng. Rolldown tiếp tục phát triển với nhiều cập nhật thú vị từ cộng đồng, cho thấy sự phát triển mạnh mẽ của hệ sinh thái Vite.

Bài viết này cung cấp cập nhật quan trọng về các công cụ phát triển JavaScript hàng đầu như Vite, Vitest và Rolldown giúp lập trình viên theo kịp xu hướng công nghệ mới nhất.

AI coding has made CI a bottleneck, so we reworked ours to keep up

Trước đây AI coding đã tạo ra điểm nghẽn trong CI/CD pipeline khiến thời gian chờ PR và chi phí vận hành tăng cao. Nguyên nhân kỹ thuật đến từ việc hệ thống CI không được tối ưu cho khối lượng công việc do AI tạo ra. Công ty đã tái thiết kế CI từ hạ tầng đến cách lập lịch và song song hóa test, giúp giảm đáng kể thời gian chờ PR và chi phí chạy. Họ sử dụng các kỹ thuật như test parallelization và workflow scheduling để tối ưu hóa hiệu suất. Bài viết mang lại bài giá trị về cách tiếp cận CI/CD như một hệ thống thống nhất thay vì các component riêng lẻ.

Bài viết này giúp lập trình viên tối ưu hóa hệ thống CI để giảm thời gian chờ PR và chi phí vận hành khi AI code ngày càng phổ biến.

Tales from the Void: July 2026 Recap

Tháng 7/2026 ghi nhận những cập nhật đáng chú ý: Oxlint giới thiệu linting ổn định theo kiểu dữ liệu, Vite 8 vượt Vite 7 về số lượt tải xuống, Angular chuyển sang sử dụng Rolldown và Oxc, cùng những đóng góp mới từ cộng đồng.

Nếu bạn đang phát triển ứng dụng hiện đại với TypeScript và muốn tối ưu hóa chất lượng mã bằng các công cụ mới nhất như linting thông minh và chuyển đổi nhanh chóng giữa framework, bài này sẽ giúp bạn cập nhật những tiến bộ quan trọng trong công nghệ backend và frontend hiện tại.

Announcing Vite+ Beta

VoidZero vừa ra mắt phiên bản beta của Vite+, một bộ công cụ phát triển web tích hợp Vite, Vitest, Rolldown, tsdown, Oxlint và Oxfmt thông qua CLI duy nhất. Lệnh vp cung cấp các tác vụ nhất quán như dev server, testing, linting, formatting, building và bundling thư viện. Phiên bản beta cải tiến hơn alpha với bộ nhớ đệm thông minh, công cụ di chuyển (vp migrate), tính năng doanh nghiệp (template tổ chức, proxy) và hỗ trợ đa nền tảng mạnh mẽ. Hơn 1.300 kho public đã sử dụng Vite+. Roadmap tới 1.0 bao gồm remote caching, hỗ trợ GitLab CI/CD và tương thích framework rộng hơn. Vite+ được cấp phép MIT và không phụ thuộc framework.

Nếu bạn đang làm frontend với các công cụ hiện đại như TypeScript, testing tự động hoặc cần tối ưu hóa pipeline phát triển, Vite+ Beta sẽ giúp bạn tiết kiệm thời gian và công sức với một gói công cụ tích hợp hoàn chỉnh, từ server phát triển đến kiểm tra và định dạng code.

Tales from the Void: June 2026 Recap

Bản tóm lược tháng 6/2026 của VoidZero giới thiệu Vite+ (beta) - bộ công cụ web thống nhất tích hợp Vite, Vitest, Rolldown, tsdown, Oxlint và Oxfmt. Vite 8.1 bổ sung chế độ dev server nhanh hơn, trong khi Oxlint hỗ trợ thử nghiệm React Compiler dựa trên Rust. Astro 7.0, Nuxt 4 và Vinext đều chuyển sang dùng Vite 8, còn ViteConf 2026 dự kiến diễn ra trực tuyến vào 15/10.

Nếu bạn đang xây dựng ứng dụng web hiện đại, đặc biệt với React, Vue, Svelte hay Astro, Vite+ và các cập nhật mới nhất trong tháng này sẽ giúp bạn tối ưu hóa hiệu suất, công cụ lồng ghép và tính tương thích, từ đó tiết kiệm thời gian và công sức trong quá trình phát triển.

Fix AI Code Hallucinations: TypeScript Compiler + TDD

Các lập trình viên đang đối mặt với vấn đề AI "hallucinations" khi code, dẫn đến các đoạn mã không đạt yêu cầu dù có vẻ đúng. Giải pháp đề xuất kết hợp TypeScript compiler với TDD (Test-Driven Development) để tạo vòng lặp phản hồi chẩn đoán. Khi compiler phát hiện lỗi kiểu (type errors) hoặc test thất bại, thông tin này sẽ được gửi trở lại cho AI agent để tự sửa code. Hệ thống này giúp giảm đáng kể lỗi do AI tạo ra, nâng cao độ chính xác của code tạo ra.

Bài hướng dẫn này giúp xây dựng một vòng lặp phản hồi TypeScript giúp AI tự sửa lỗi mã một cách hiệu quả.

How to Build Characterization Tests Before Refactoring Legacy Code

Khi kế thừa mã nguồn cũ, nhóm phát triển thường muốn ngay lập tức cải thiện để giảmภาระ bảo trì. Tuy nhiên, việc thay đổi mà không hiểu rõ hành vi hiện tại có thể gây ra lỗi vì các hàm phức tạp, logic trùng lặp và điều kiện lồng sâu. Để tránh rủi ro, cần xây dựng các bài test đặc trưng (characterization tests) ghi lại đầu vào và đầu ra thực tế của mã trước khi thực hiện tái cấu trúc. Các test này hoạt động như mạng lưới bảo vệ, cho phép phát hiện bất kỳ thay đổi không mong muốn ngay khi sửa đổi. Kinh nghiệm cho thấy, đầu tư thời gian vào việc viết test đặc trưng trước giúp giảm đáng kể số lỗi sau refactor và tăng niềm tin vào quá trình cải tiến.

We need to produce exactly one short Vietnamese sentence, explaining why a programmer should read this. Must be only Vietnamese and Latin characters, no Chinese/Japanese/Korean/Han characters. No markdown. No opening phrase like "Bạn là...". Just a short sentence. Must not contain any non-Latin characters, so Vietnamese uses Latin characters with diacritics, that's okay. Must not contain any Chinese characters etc. So we can write something like: "Để hiểu rõ hơn về cách viết các bài kiểm thử trước khi tái cấu trúc mã cũ, giúp giảm lỗi và cải thiện chất lượng." That's a single sentence, Vietnamese, Latin characters only (including diacritics). Ensure no extra punctuation beyond period. It's one sentence. Provide exactly that.

How to Automate Your Tests in Express Using Vitest

Khi phát triển API Express, việc kiểm tra tích hợp thường buộc phải chuyển qua lại giữa trình soạn thảo và trình duyệt, làm mất thời gian và tập trung. Bài viết hướng dẫn cách thiết lập Vitest – framework test hiện đại dựa trên Vite – để chạy các test đơn vị và tích hợp trực tiếp trong môi trường Node mà không cần phụ thuộc vào trình duyệt. Sau khi tích hợp Vitest, các nhà phát triển có thể tự động hóa quy trình kiểm tra Express routes, middleware và controller bằng các lệnh npm test, giảm thời gian hồi hồi từ vài phút xuống dưới giây và tăng độ tin cậy của mỗi commit. Bài viết nhấn mạnh tầm quan trọng của việc mock các service bên ngoài và sử dụng Vitest's watch mode để nhận phản hồi ngay lập tức khi thay đổi mã, giúp duy trì chất lượng mã nguồn mà không làm gián đoạn luồng làm việc. Đối với những ai đang cân nhắc áp dụng Vitest cho dự án Express, bài viết cung cấp bước‑by‑step cụ thể, từ cài đặt phụ thuộc, cấu hình vitest.config.ts đến viết ví dụ test cho endpoint GET/POST, giúp quyết định đọc bài gốc trở nên rõ ràng hơn.

Bài viết này giúp bạn tiết kiệm thời gian và công sức bằng cách tự động hóa kiểm thử API trong Express bằng Vitest.

Testing Serverless Beyond the Handler: One Test, Two Modes

Bối cảnh: Các unit test trong AWS Lambda thường chỉ tập trung vào handler function mà bỏ qua các thành phần bảo mật như IAM, API authorizer hay EventBridge rule. Nguyên nhân kỹ thuật: Unit test chạy trong môi trường local không tương tác với dịch vụ AWS thực tế, dẫn đến không kiểm tra được quy trình xác thực và ủy quyền. Hệ quả: Có thể có unit test pass nhưng hệ thống deployed vẫn fail do lỗi cấu hình IAM hoặc vấn đề integration. Điều đáng học: Viết test scenario một lần và chạy theo hai chế độ - in-process với AWS thực và qua deployed stack để phát hiện sớm lỗi integration trước khi production.

Bài viết này giúp lập trình viên kiểm tra toàn diện serverless bằng cách viết một test duy nhất chạy theo hai chế độ khác nhau để phát hiện lỗi IAM, API authorizer hay EventBridge.

Getting Started with the Angular CLI: Beginner-friendly Guide

If you’re new to Angular, one tool will follow you through your whole journey: the Angular CLI. Every tutorial uses it, every Angular project depends on it, and once …

Testing LLM Output in CI with Vitest and Schema Validation

Trong bối cảnh kiểm soát chất lượng ứng dụng LLM, bài viết trình bày cách xây dựng bộ kiểm định CI xác định với chi phí bằng không bằng Vitest trong môi trường TypeScript. Giải pháp sử dụng replay fixtures và Zod schema contracts để xử lý các output không nhất quán từ các mô hình ngôn ngữ lớn. Kết quả là hệ thống CI có khả năng phát hiện ngay các thay đổi trong behavior của LLM mà không cần gọi lại API tốn kém. Lập trình viên sẽ học được cách tạo test suite tự động cho ứng dụng LLM với chi phí tối thiểu và độ tin cậy cao.

Bài này giúp bạn xây dựng bộ kiểm định CI đáng tin cậy và không tốn chi phí cho ứng dụng LLM bằng cách sử dụng Vitest, replay fixtures và Zod schema contracts.

Gutenberg’s JavaScript unit and integration tests now use Vitest

TL;DR Gutenberg's JavaScript unit and integration tests now use Vitest, bringing better support for modern JavaScript modules and real-browser component testing. Tests explicitly import Vitest APIs. Filenames select Node, jsdom, or Browser Mode according to what each test needs. @wordpress/scripts 36.0.0 makes Vitest the default for test-unit-js. Projects install and configure their own test runner.…

Component testing: a practical guide for frontend developers

Learn how to test UI components in isolation with confidence. This is a guide for frontend developers on component testing that covers common techniques and the tools leading teams use.

Build Automated PR Verification Gates for AI Code

Việc xây dựng hệ thống kiểm tra PR tự động cho AI code là cần thiết để phát hiện lỗi logic do AI tạo ra. Pipeline này kết hợp AST parsing, property-based testing và mutation testing trong GitHub Actions để kiểm tra chất lượng code. Phương pháp 3 tầng này giúp bắt được các loại lỗi khác nhau mà unit testing đơn thuần bỏ sót. Với mutation testing đạt tỷ lệ coverage 85%, hệ thống phát hiện được nhiều edge case khó dự đoán. Các lập trình viên nên cân nhận áp dụng approach này nếu đang làm việc với AI-generated code để đảm bảo chất lượng và giảm thiểu rủi ro trong production.

Tôi muốn biết cách xây dựng hệ thống kiểm tra PR tự động để phát hiện lỗi logic do AI tạo ra trong quy trình phát triển phần mềm.

Build a Typed Context Compaction Gate for AI Agents

Context compaction gate giúp AI agents giảm bloat token và loại bỏ noise từ công cụ output. Cơ chế kỹ thuật phân loại mỗi tool output thành keep, summarize hoặc discard trước khi chuyển đến LLM turn. Giải pháp này có thể cắt giảm đáng kể chi phí tính toán và cải thiện hiệu suất response time. Các nhà phát triển nên xem xét implementation vì nó trực tiếp giải quyết vấn đề context window overflow - vấn đề gây lãng phí token ước tính khoảng 35% trong các hệ thống agent hiện nay. Kỹ thuật này đặc biệt hữu ích khi làm việc với các tool output dài trong LangChain hoặc Agent Framework.

Tăng hiệu suất và giảm chi phí cho hệ thống AI bằng cách tối ưu hóa lượng context tokens thông qua cơ chế compaction gate thông minh.

RAG Citation Verification: Build TypeScript Byte-Span Validators

Trong lĩnh vực AI đang phát triển mạnh mẽ, vấn đề hallucinated LLM references trở nên đáng quan trọng khi hệ thống tạo ra thông tin không có nguồn xác thực. Để giải quyết vấn đề này, bài viết đề xuất xây dựng citation validators bằng TypeScript có khả năng xác định byte-span một cách deterministik và có throughput cao. Hệ quả của việc triển giải pháp này là loại bỏ hoàn toàn các thông tin không có nguồn gốc, tăng cường độ chính xác và độ tin cậy cho các ứng dụng AI. Điều đáng học hỏi là cách tiếp cận kỹ thuật kết hợp giữa TypeScript và assertion middleware để tạo ra hệ thống kiểm chứng tham chiếu hiệu quả, có thể áp dụng ngay vào các production environment.

Bài này giúp lập trình viên xây dựng bộ kiểm tra trích dẫn xác thực trong TypeScript để tránh ảo tưởng từ mô hình ngôn ngữ lớn.

How to Use Differential Testing During a Legacy Migration

Quá trình di sản legacy system chứa nhiều rủi ro nhất không phải lúc bắt đầu triển khai mà khi triển khai mới trông hoàn tất. Differential testing trở thành giải pháp hiệu quả bằng cách so sánh đầu ra giữa hệ thống cũ và mới với test cases giống nhau. Phương pháp này phát hiện ra 67% lỗi không thể tìm thấy bằng unit testing thông thường. Đáng học hỏi là cách thiết kế test cases tập trung vào các path edge cases và boundary conditions để tối đa hóa độ phủ. Triển khai differential testing giúp giảm thiểu 40% thời gian regression testing trong quá trình migration thực tế.

Bài viết giúp bạn tránh sai lầm nguy hiểm khi di chuyển hệ thống cũ bằng cách phát hiện lỗi qua thử nghiệm vi sai ngay khi mã mới có vẻ hoàn thiện.

Production MCP Server Architecture in TypeScript

Learn how to architect, deploy, and maintain a resilient, stateful Model Context Protocol (MCP) server in TypeScript that handles reconnects, long-lived tool sessions, and schema validation without leaking memory or crashing agent sessions.

Nx 23.2 Is Here: Oxlint, Oxfmt, Leaner CLI Output and Better Caching

The Oxc toolchain arrives in Nx. Plus leaner task output, Nx running inside agent sandboxes, and a cache shared across worktrees and repository clones.

Testing Vue Components That Use TanStack Query

Bối cảnh: Bài viết tập trung vào việc test các Vue component sử dụng TanStack Query, một thư viện quản lý state phía client. Nguyên nhân kỹ thuật: TanStack Query có các hook như useQuery và useMutation hoạt động khác biệt với state management thông thường, gây khó khăn trong test do chúng phụ thuộc vào React Query Provider. Hệ quả: Test component với TanStack Query yêu cầu cấu hình đặc biệt với ví dụ mock data và wrapper test để đảm bảo hoạt động đúng. Điều đáng học: Bài viết cung cấp cách setup môi trường test với Jest và Vue Test Utils, bao gồm việc sử dụng @tanstack/vue-query và mocking các giá trị trả về của query functions để kiểm soát trạng thái loading, error và success.

Bài viết giải thích những điểm khác biệt khi test Vue components sử dụng TanStack Query so với các phương pháp testing thông thường.

Tales from the Void: August 2026 Recap

Trong tháng 8 năm 2026 hệ thống Vite công bố một loạt cập nhật quan trọng bao gồm việc tích hợp React Compiler qua Oxc, đạt mốc 100 million lần tải mỗi tuần của Vitest, tổ chức ViteConf 2026 và các bản phát hành mới từ Vite+ cùng Rolldown. Sự kết hợp giữa Oxc và React Compiler cho phép chuyển đổi JSX nhanh hơn mà không cần bước Babel trung gian, trong khi Vitest vượt qua con số tải vềสดง sự tin tưởng của cộng đồng vào framework kiểm thử này. Những tiến bộ này được thể hiện rõ ràng tại ViteConf 2026 và đi kèm với các cải tiến trong Vite+ và Rolldown, giúp giảm thời gian build và nâng trải nghiệm phát triển. Bài học từ bản tóm tắt là việc kết hợp công cụ biên dịch hiện đại với hệ thống build, theo dõi các mốc sử dụng và đầu tư vào sự kiện cộng đồng có thể tạo ra tăng trưởng hiệu quả và được đo lường cụ thể. Đối với lập trình viên đang cân nhắc đọc bài gốc, các con số và tên công nghệ cụ thể như Oxc, Vitest 100 million, ViteConf 2026, Vite+ và Rolldown cung cấp một cái nhìn thực tế về hướng phát triển của Vite cuối năm 2026.

Bài này cung cấp cập nhật quan trọng về các dự án Vite hàng đầu giúp lập trình viên nắm bắt xu hướng và công nghệ mới nhất.

Introducing Pytest and Vitest integrations for LangSmith Evaluations

Introducing a new way to run evals using LangSmith’s Pytest and Vitest/Jest integrations.