Giới thiệu

Khi viết kiểm thử với Jest, tôi đã gặp phải một số lỗi như "không thể đọc biến môi trường" và "không thể tìm thấy vòng xoay tải". Bài viết này sẽ tổng hợp các tình huống gặp phải và cách giải quyết chúng.

1. Lỗi không hoạt động của import.meta.env

Tình huống

• Phát triển một ứng dụng ghi chép học tập sử dụng React, Vite và Supabase.
• Cố gắng mô phỏng client Supabase với Jest.
• Sao chép mã sản xuất từ utils/supabase.ts và tạo một tệp mới mocks/utils/supabase.ts.

Trong tệp này, tôi đã viết:

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL as string;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY as string;

Tuy nhiên, Jest không hiểu import.meta.env của Vite.

Vấn đề

import.meta.env chỉ hợp lệ trong môi trường xây dựng của Vite và không được hỗ trợ trong Jest (môi trường Node.js + ts-jest), dẫn đến lỗi biên dịch trong TypeScript.

Giải pháp

Sử dụng process.env cho các mô phỏng chỉ dành cho kiểm thử. Thêm vào đó, tạo tệp .env.test và tải nó khi Jest chạy.

// src/mocks/utils/supabase.ts
const supabaseUrl = process.env.VITE_SUPABASE_URL || "http://localhost:54321";
const supabaseAnonKey = process.env.VITE_SUPABASE_ANON_KEY || "mock-anon-key";

2. Kiểm thử vòng xoay tải thất bại

Tình huống

• Khi mô phỏng một quá trình bất đồng bộ, việc thực thi diễn ra quá nhanh khiến không thể kiểm thử trạng thái tức thời của giao diện người dùng.

const spinner = await screen.findByRole("status");
expect(spinner).toBeInTheDocument();

findByRole("status") chờ cho phần tử đã chỉ định xuất hiện trong DOM. Tuy nhiên, mô phỏng Supabase đã trả về dữ liệu ngay lập tức, dẫn đến việc setLoading(false) được thực thi ngay, làm cho vòng xoay biến mất.

Vấn đề

Vòng xoay thực sự hiển thị trong quá trình render ban đầu. Tuy nhiên, vì nó ngay lập tức biến mất trong khi chờ findByRole, nó được xem là "không tìm thấy" trong bài kiểm thử.

Giải pháp

Để kiểm tra thành công, hãy thay đổi thành getByRole("status") và kiểm tra xem nó có tồn tại trong lần hiển thị đầu tiên hay không.

test("Vòng xoay tải được hiển thị", () => {
  renderWithProviders(<App />);
  expect(screen.getByRole("status")).toBeInTheDocument();
});

Nếu bạn muốn kiểm tra đầy đủ "được hiển thị trong khi tải, sau đó biến mất sau khi dữ liệu được lấy", hãy thêm một setTimeout vào mô phỏng để trì hoãn việc thực thi và kiểm tra bằng findByRole.

Tóm tắt

• Lỗi 1: Sử dụng import.meta.env với mô phỏng Supabase → Jest không thể sử dụng điều này và dẫn đến lỗi.
  Giải pháp: Chuyển sang process.env.

• Lỗi 2: Kiểm thử vòng xoay thất bại → Mô phỏng ngay lập tức được giải quyết và biến mất.
  Giải pháp: Sử dụng getByRole để kiểm tra đơn giản. Thêm độ trễ cho mô phỏng để xác minh hoạt động.

Thực tiễn tốt nhất

• Sử dụng môi trường phù hợp: Đảm bảo rằng bạn đang sử dụng .env.test cho các kiểm thử.
• Thêm thời gian chờ: Khi làm việc với các mô phỏng bất đồng bộ, hãy thêm thời gian chờ để chắc chắn rằng UI có thời gian cập nhật trước khi kiểm tra.

Cái nhìn sâu hơn

Việc sử dụng Jest với Vite là một thách thức bởi vì môi trường không hoàn toàn tương thích. Hãy nhớ rằng Jest được thiết kế để hoạt động trong môi trường Node.js, trong khi Vite hoạt động trong môi trường trình duyệt, do đó, bạn cần phải thích nghi mã của mình cho phù hợp với cả hai.

Câu hỏi thường gặp (FAQ)

1. Lỗi import.meta.env có thể xảy ra ở đâu?

Lỗi này thường xảy ra khi bạn cố gắng sử dụng import.meta.env trong mã kiểm thử Jest.

2. Làm thế nào để kiểm tra bất đồng bộ trong Jest?

Sử dụng async/await hoặc các phương thức như findByRole để đảm bảo rằng bạn đang kiểm tra trạng thái đúng của UI.

3. Có cách nào khác để mô phỏng client Supabase không?

Có, bạn có thể sử dụng các thư viện như msw để mô phỏng các gọi API một cách linh hoạt và mạnh mẽ hơn.

Bằng cách làm theo các hướng dẫn và mẹo này, bạn sẽ có thể giải quyết các vấn đề phổ biến khi viết kiểm thử với Jest, đặc biệt là trong các ứng dụng React sử dụng Vite và Supabase. Hãy thử ngay hôm nay và cải thiện quy trình phát triển của bạn!