Giới thiệu

Bài viết này tóm tắt các lỗi và giải pháp mà tôi đã gặp phải khi sử dụng Jest để kiểm thử một ứng dụng "nhật ký học tập" được xây dựng bằng React, TypeScript, Chakra UI và Supabase. Việc kiểm thử ứng dụng giúp đảm bảo rằng mã của bạn hoạt động đúng và không có lỗi, điều này rất cần thiết trong quá trình phát triển phần mềm.

Danh sách nội dung

1. supabaseUrl là bắt buộc
2. Cảnh báo: Nhận NaN cho thuộc tính 'value'
3. Không tìm thấy phần tử theo văn bản
4. Bộ kiểm thử: 0 trong tổng số 1 (Bị kẹt trong RUNS)
5. Thực hành tốt nhất
6. Cạm bẫy thường gặp
7. Mẹo hiệu suất
8. Xử lý sự cố
9. Câu hỏi thường gặp

1. supabaseUrl là bắt buộc

Tình huống:

Tôi đã vô tình gọi một client cho một dịch vụ bên ngoài (Supabase, Firebase, v.v.) trong quá trình kiểm thử, và đã xảy ra lỗi do thiếu tệp .env.

Nguyên nhân:

Client thực tế đã được sử dụng khi Jest được thực thi. Mock không được áp dụng.

Giải pháp:

Tạo tệp src/mocks/supabase.ts để mock nó.

export const superbase = {
  from: () => ({
    select: async () => ({ data: [], error: null }),
    insert: async () => ({ error: null }),
    delete: async () => ({ error: null }),
    update: async () => ({ error: null }),
  }),
};

Bên cạnh đó, hãy thiết lập moduleNameMapper trong jest.config.js để đảm bảo rằng các mock được sử dụng.

2. Cảnh báo: Nhận NaN cho thuộc tính 'value'

Tình huống:

Một cảnh báo xuất hiện khi NaN được truyền vào NumberInput của Chakra UI.

Nguyên nhân:

Sự kết nối giữa Controller của React Hook Form và đầu vào số không hoàn chỉnh, dẫn đến việc chuyển đổi từ chuỗi sang số bị lỗi.

Giải pháp:

• Đặt valueAsNumber: true trong Controller để xử lý như một số.
• Luôn đặt defaultValue là 0 hoặc 1 để xác định giá trị khởi tạo.

3. Không tìm thấy phần tử theo văn bản

Tình huống:

Việc khớp văn bản đã thất bại.

Nguyên nhân:

Văn bản thực tế trong UI khác biệt (ví dụ, việc triển khai là "Nhật ký học tập," nhưng kiểm thử đang tìm kiếm "Ứng dụng Nhật ký học tập").

Văn bản thông báo lỗi xác thực không nhất quán với việc triển khai.

Giải pháp:

Sửa đổi mã kiểm thử để khớp với UI.

expect(await screen.findByText(/Nhật ký học tập/i)).toBeInTheDocument();
expect(await within(dialog).findByText(/thời gian phải lớn hơn hoặc bằng 1/i)).toBeInTheDocument();

Sửa đổi kiểm thử để khớp với hiển thị thực tế của UI.

4. Bộ kiểm thử: 0 trong tổng số 1 (Bị kẹt trong RUNS)

Tình huống:

Kiểm thử bị kẹt trong trạng thái "RUNS."

Nguyên nhân:

Client Supabase thực tế đã bị gọi liên tục, gây ra vòng lặp vô hạn.

Mock không được áp dụng đúng cách.

Giải pháp:

• Luôn bao gồm jest.mock("../utils/supabase"); ở đầu tệp kiểm thử của bạn.
• Chuẩn bị tệp mocks/supabase.ts và luôn sử dụng mock khi kiểm thử.

Tóm tắt

Việc kiểm thử với Jest có thể gặp một số lỗi phổ biến, nhưng với các giải pháp cụ thể, bạn có thể xử lý chúng một cách hiệu quả. Hãy nhớ rằng việc kiểm thử là một phần quan trọng trong quy trình phát triển phần mềm và giúp bạn phát hiện lỗi sớm hơn.

Thực hành tốt nhất

• Luôn sử dụng mocks: Đảm bảo rằng bạn đã thiết lập mocks cho các dịch vụ bên ngoài như Supabase hoặc Firebase để không bị kẹt trong các lỗi liên quan đến mạng.
• Kiểm tra văn bản chính xác: Thường xuyên kiểm tra xem văn bản trong mã kiểm thử có khớp với văn bản trong phần giao diện người dùng hay không.
• Đặt giá trị khởi tạo hợp lý: Luôn thiết lập giá trị khởi tạo cho các đầu vào số để tránh lỗi NaN.

Cạm bẫy thường gặp

• Không sử dụng mocks có thể dẫn đến lỗi mạng không đáng có.
• Quên kiểm tra cập nhật văn bản UI có thể gây ra lỗi trong kiểm thử.

Mẹo hiệu suất

• Sử dụng các phương pháp kiểm thử không đồng bộ đúng cách để tối ưu hóa hiệu suất kiểm thử.
• Tối ưu hóa việc sử dụng tài nguyên trong khi kiểm thử bằng cách mock các dịch vụ bên ngoài.

Xử lý sự cố

Nếu bạn gặp phải lỗi không mong muốn, hãy kiểm tra lại các cấu hình Jest và đảm bảo rằng tất cả các mock đều đã được áp dụng đúng cách. Kiểm tra các log lỗi để xác định nguyên nhân gốc rễ của vấn đề.

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

• Tại sao tôi thấy cảnh báo NaN?
  Cảnh báo này xuất hiện khi dữ liệu đầu vào không hợp lệ. Hãy đảm bảo rằng bạn đã thiết lập giá trị khởi tạo và sử dụng valueAsNumber đúng cách.
• Làm thế nào để sử dụng mocks trong Jest?
  Bạn có thể tạo một tệp mock và sử dụng jest.mock để áp dụng nó trong các tệp kiểm thử của bạn.

Hãy bắt đầu kiểm thử ứng dụng của bạn với Jest một cách hiệu quả hơn bằng cách áp dụng những giải pháp này!