#vitest

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.

Vitest: an introduction

Vitest là một test runner mạnh mẽ được vận hành bởi Vite, tương thích API với Jest, hỗ trợ native ESM và TypeScript, chế độ watch, cùng khả năng mocking tích hợp sẵn.

Lập trình viên phát triển frontend/backend cần tìm hiểu Vitest để tối ưu hóa tốc độ chạy test, hỗ trợ TypeScript và ESM tự động, đồng thời giảm thiểu phụ thuộc bên ngoài nhờ API tương tự Jest và chế độ theo dõi thay đổi.

Storybook tutorial: build and test UI components in isolation

Hướng dẫn sử dụng Storybook với React để phát triển, mô hình hóa trạng thái tải/loi, kiểm thử tương tác và khả năng truy cập, đồng thời chạy CI.

Lập trình viên React nên đọc bài này để hiểu cách xây dựng và kiểm tra các thành phần UI độc lập với Storybook, giúp tối ưu hóa hiệu suất phát triển, kiểm tra trạng thái và tương tác một cách hiệu quả.

Build a Vite plugin from scratch

Tạo một Vite plugin từ đầu để biến đổi tệp ghi chú tùy chỉnh, cung cấp virtual module, hỗ trợ cả môi trường development và production, đồng thời tích hợp kiểm thử.

Lập trình viên muốn khám phá cách xây dựng plugin cho Vite từ cơ bản đến nâng cao để tự tạo công cụ tích hợp với công cụ phát triển của mình, từ đó tối ưu hóa quy trình phát triển và mở rộng khả năng của dự án.

Build and publish a TypeScript package to npm

Tạo và xuất bản thư viện TypeScript lên npm với đầu ra đa dạng (ESM, CommonJS), kèm khai báo kiểu (type declarations), cấu hình exports, kiểm thử, phiên bản ngữ nghĩa (semantic versioning) và phương thức xuất bản đáng tin cậy (trusted publishing).

Là người viết mã TypeScript, bạn nên đọc bài này để hiểu cách tối ưu hóa việc đóng gói, phát hành và chia sẻ thư viện npm với các tính năng hiện đại như xuất nhập ESM/CommonJS, định nghĩa kiểu chính xác và bảo mật khi đăng tải lên npm.

Integration testing Node.js with Testcontainers

Viết các bài kiểm thử tích hợp (integration tests) cho Node.js với cơ sở dữ liệu PostgreSQL thật bằng Testcontainers, bao gồm thiết lập schema, cô lập, dọn dẹp và chạy trên CI.

Lập trình viên cần đọc để hiểu cách sử dụng Testcontainers để chạy các test tích hợp Node.js với cơ sở dữ liệu PostgreSQL một cách độc lập, nhanh chóng và không phụ thuộc vào môi trường sản phẩm, giúp giảm thời gian debug và bảo đảm chất lượng code trong quá trình phát triển.

Testing React Server Components: Vitest Patterns for Async Boundaries and Mock Strategies

Bài viết hướng dẫn kiểm thử React Server Components trong sản xuất năm 2026 bằng Vitest, tập trung vào xử lý các thành phần bất đồng bộ, mocking (db, fetch), cấu hình môi trường, kiểm thử Suspense boundary, cũng như quyết định giữa chiến lược tích hợp (integration) và E2E.

Một lập trình viên cần đọc bài này để hiểu cách tối ưu hóa và thực hiện testing hiệu quả cho các thành phần Server Component trong React, đặc biệt là với các trường hợp async (chẳng hạn API, DB, fetch), từ đó giảm thiểu lỗi sản phẩm và tăng tốc phát triển.

Using a behaviour index to help AI coding agents explore your code

A 'behaviour index' is a Markdown file (BEHAVIOR.md) auto-generated from test names and file locations that helps AI coding agents and humans navigate a codebase. Instead of searching raw code lines (expensive in tokens) or file paths (low information density), agents search the behaviour index to quickly understand what a concept means in the app and where its implementation lives. The post compares token costs across three search strategies using the Codex CLI repo, shows how to generate the index via test reporters or regex scripts, and covers limitations like weak test suites, parameterised test names, and agents that ignore custom search instructions. Optimisation tips include embedding code symbols in test names and maintaining separate AI and human versions of the index.

Testing What Users Actually See with Vitest and Chromatic

Chromatic is launching an early-access Vitest plugin that adds visual testing to existing Vitest Browser Mode test suites with no required changes to test files. By registering the plugin in the Vitest config, each test's rendered output is captured and uploaded to Chromatic's cloud, where stable snapshots are taken, diffs computed, and results reported as PR checks. This approach catches UI regressions — layout, spacing, fonts, breakpoints — that traditional logic-based assertions miss. Compared to Vitest's built-in visual testing, Chromatic offers cloud-based stable rendering, branch-aware baselines, flake reduction via SteadySnap, parallel snapshotting, and inspectable DOM reproductions. The beta is private and targets teams already using or migrating to Vitest Browser Mode with Playwright.