Giới thiệu

Sự kết hợp giữa React Hook Form (RHF) và Zod đã trở nên phổ biến trong các dự án hiện đại. Cặp đôi này không chỉ đơn giản hóa việc quản lý và xác thực biểu mẫu mà còn cung cấp cho lập trình viên cách tiếp cận an toàn và có kiểu dữ liệu rõ ràng. Tuy nhiên, việc đảm bảo rằng mọi thứ hoạt động đúng cách là rất quan trọng. Trong bài viết này, chúng ta sẽ tìm hiểu cách kiểm tra các biểu mẫu sử dụng RHF và Zod thông qua việc thực hiện các bài kiểm tra cụ thể.

Mục tiêu kiểm tra

Chúng ta sẽ kiểm tra một biểu mẫu đơn giản cho việc đăng nhập. Biểu mẫu này sẽ bao gồm:

• Xác thực các trường
• Đăng ký thành công
• Hiển thị thông báo lỗi
• Thực hiện kiểm tra tự động bằng Jest và Testing Library

Ví dụ về Biểu mẫu Đăng nhập

// LoginForm.tsx
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(6),
});

type FormData = z.infer<typeof schema>;

export function LoginForm({ onSubmit }: { onSubmit: (data: FormData) => void }) {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormData>({
    resolver: zodResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input placeholder="Email" {...register('email')} />
      {errors.email && <span>{errors.email.message}</span>}

      <input type="password" placeholder="Password" {...register('password')} />
      {errors.password && <span>{errors.password.message}</span>}

      <button type="submit">Login</button>
    </form>
  );
}

Thực hiện Các Bài Kiểm Tra với @testing-library/react

Chúng ta sẽ thực hiện các bài kiểm tra cho biểu mẫu:

// LoginForm.test.tsx
import { render, screen, fireEvent } from '@testing-library/react';
import { LoginForm } from './LoginForm';

describe('LoginForm', () => {
  it('hiển thị lỗi xác thực khi gửi biểu mẫu trống', async () => {
    const handleSubmit = jest.fn();
    render(<LoginForm onSubmit={handleSubmit} />);

    fireEvent.click(screen.getByRole('button', { name: /login/i }));

    expect(await screen.findByText(/invalid email/i)).toBeInTheDocument();
    expect(await screen.findByText(/at least 6 characters/i)).toBeInTheDocument();
    expect(handleSubmit).not.toHaveBeenCalled();
  });

  it('gửi thành công với dữ liệu hợp lệ', async () => {
    const handleSubmit = jest.fn();
    render(<LoginForm onSubmit={handleSubmit} />);

    fireEvent.input(screen.getByPlaceholderText(/email/i), {
      target: { value: 'test@example.com' },
    });
    fireEvent.input(screen.getByPlaceholderText(/password/i), {
      target: { value: '123456' },
    });

    fireEvent.click(screen.getByRole('button', { name: /login/i }));

    await screen.findByRole('button'); // chờ render từ submit
    expect(handleSubmit).toHaveBeenCalledWith({
      email: 'test@example.com',
      password: '123456',
    });
  });
});

Các điểm cần xác thực

Khi thực hiện kiểm tra, chúng ta cần đảm bảo rằng:

• Lỗi xác thực hiển thị chính xác khi gửi biểu mẫu trống.
• Hàm onSubmit chỉ được gọi khi dữ liệu hợp lệ.
• Component thực sự xác thực dựa trên schema Zod.

Mẹo và Thủ thuật

• Đối với các trường động (như mảng hoặc các bước), hãy sử dụng useFieldArray và kiểm tra với nhiều bước.
• Sử dụng renderWithProviders() nếu biểu mẫu nằm trong các Providers như Theme hoặc QueryClient.
• Kiểm tra các trường với screen.getByPlaceholderText, getByLabelText, hoặc getByRole, và tránh sử dụng getByTestId trừ khi không có lựa chọn nào khác.

Kết luận

Việc kiểm tra biểu mẫu với React Hook Form và Zod trở nên dễ dàng khi bạn hiểu cách mà các lỗi và xác thực được hiển thị. Sử dụng @testing-library/react cùng với các mock như jest.fn() giúp mọi thứ trở nên dễ đoán và đáng tin cậy, đồng thời bảo vệ bạn khỏi các vấn đề trong tương lai. Hãy áp dụng sự kết hợp này vào các dự án của bạn để đảm bảo rằng các biểu mẫu hoạt động như mong đợi.

FAQ

Tại sao nên sử dụng Zod với React Hook Form?

Zod giúp xác thực dữ liệu một cách mạnh mẽ và có kiểu rõ ràng, giúp nâng cao tính an toàn của ứng dụng.

Có những công cụ nào khác để kiểm tra React Form?

Ngoài @testing-library/react, bạn có thể sử dụng Enzyme hoặc Cypress cho các bài kiểm tra end-to-end.

Làm thế nào để tối ưu hóa hiệu suất khi kiểm tra biểu mẫu?

Hãy chắc chắn rằng bạn chỉ kiểm tra những gì cần thiết và tránh lặp lại các bài kiểm tra không cần thiết, điều này sẽ giúp tiết kiệm thời gian và tài nguyên.

Tài nguyên tham khảo

• React Hook Form Documentation
• Zod Documentation

Hãy bắt đầu kiểm tra biểu mẫu của bạn ngay hôm nay!