React Testing با UserEvent و Testing Library

Summarize this content to 400 words in Persian Lang

در این وبلاگ یاد می گیریم که چگونه یک برنامه React را با استفاده از userEvent و testing-library تست کنیم. ما یک مؤلفه UserForm را آزمایش خواهیم کرد که دارای دو فیلد ورودی برای نام کاربری و ایمیل و یک دکمه ارسال است. فیلدهای ورودی و دکمه ارسال را آزمایش خواهیم کرد.”

*برچسب ها: [“React”, “Testing”, “userEvent”, “testing-library”] *

در این وبلاگ یاد می گیریم که چگونه یک برنامه React را با استفاده از userEvent و testing-library تست کنیم. ما یک مؤلفه UserForm را آزمایش خواهیم کرد که دارای دو فیلد ورودی برای نام کاربری و ایمیل و یک دکمه ارسال است. فیلدهای ورودی و دکمه ارسال را آزمایش خواهیم کرد.

ابتدا کتابخانه ها و اجزای لازم را وارد می کنیم
:

بعد، بیایید یک تست بنویسیم تا رندر مولفه UserForm را بررسی کنیم:

test(‘renders UserForm component’, () => {
render(<UserForm />);
const button = screen.getByText(‘Submit’);
expect(button).toBeInTheDocument();
});

حالا بیایید یک آزمایش بنویسیم تا فیلدهای ورودی و دکمه ارسال را بررسی کنیم:

test(‘test using data-testid’, () => {
const handleUserAdd = jest.fn();
render(<UserForm onUserAdd={handleUserAdd} />);
const username = screen.getByTestId(‘username’);
const email = screen.getByTestId(’email’);
fireEvent.change(username, { target: { value: ‘Atik’ } });
fireEvent.change(email, { target: { value: ‘atiksujon7@gmail.com’ } });
expect(username.value).toBe(‘Atik’);
expect(email.value).toBe(‘atiksujon7@gmail.com’);
const submit = screen.getByRole(‘button’);
fireEvent.click(submit);
expect(handleUserAdd).toHaveBeenCalledTimes(1);
});

در تست فوق، ابتدا کامپوننت UserForm را رندر می کنیم و سپس فیلدهای نام کاربری و ورودی ایمیل را با استفاده از test-id آنها دریافت می کنیم. تایپ را در فیلدها شبیه سازی می کنیم و سپس دکمه ارسال را کلیک می کنیم. بررسی می کنیم که آیا تابع onUserAdd یک بار فراخوانی شده است یا خیر.

در نهایت، بیایید تست دیگری را با استفاده از صفحه کلید بنویسیم و کلیک کنیم:

test(‘test using keyboard and click’, () => {
const handleUserAdd = jest.fn();
render(<UserForm onUserAdd={handleUserAdd} />);

//Find the tow inputs
const [nameInput, emailInput] = screen.getAllByRole(‘textbox’);

//simulate typng in a name
userEvent.click(nameInput);
userEvent.keyboard(‘Rahman’);

//simulate typing in an email

userEvent.click(emailInput);
userEvent.keyboard(‘atiksujon7@gmail.com’);

//Find the submit button
const submitButton = screen.getByText(‘Submit’);
userEvent.click(submitButton);

expect(handleUserAdd).toHaveBeenCalledTimes(1);
});

در این تست از کتابخانه userEvent برای شبیه سازی تعاملات کاربر استفاده می کنیم. ابتدا روی قسمت ورودی نام کلیک می کنیم و سپس به روش صفحه کلید عبارت Rahman را تایپ می کنیم. برای فیلد ورودی ایمیل نیز همین کار را انجام می دهیم. بعد از تایپ روی دکمه ارسال کلیک می کنیم. بررسی می کنیم که آیا تابع onUserAdd یک بار فراخوانی شده است یا خیر.

در پایان، ما یک برنامه React را با استفاده از userEvent و testing-library با موفقیت آزمایش کردیم. ما فیلدهای ورودی و دکمه ارسال یک جزء UserForm را آزمایش کردیم.

در این وبلاگ یاد می گیریم که چگونه یک برنامه React را با استفاده از userEvent و testing-library تست کنیم. ما یک مؤلفه UserForm را آزمایش خواهیم کرد که دارای دو فیلد ورودی برای نام کاربری و ایمیل و یک دکمه ارسال است. فیلدهای ورودی و دکمه ارسال را آزمایش خواهیم کرد.”

*برچسب ها: [“React”, “Testing”, “userEvent”, “testing-library”] *

در این وبلاگ یاد می گیریم که چگونه یک برنامه React را با استفاده از userEvent و testing-library تست کنیم. ما یک مؤلفه UserForm را آزمایش خواهیم کرد که دارای دو فیلد ورودی برای نام کاربری و ایمیل و یک دکمه ارسال است. فیلدهای ورودی و دکمه ارسال را آزمایش خواهیم کرد.

ابتدا کتابخانه ها و اجزای لازم را وارد می کنیم
:

بعد، بیایید یک تست بنویسیم تا رندر مولفه UserForm را بررسی کنیم:

test('renders UserForm component', () => {
     render(<UserForm />);
     const button = screen.getByText('Submit');
     expect(button).toBeInTheDocument();
     });

حالا بیایید یک آزمایش بنویسیم تا فیلدهای ورودی و دکمه ارسال را بررسی کنیم:

test('test using data-testid', () => {
     const  handleUserAdd = jest.fn();
     render(<UserForm onUserAdd={handleUserAdd} />);
     const username = screen.getByTestId('username');
     const email = screen.getByTestId('email');
      fireEvent.change(username, { target: { value: 'Atik' } });
      fireEvent.change(email, { target: { value: 'atiksujon7@gmail.com' } });
      expect(username.value).toBe('Atik');
      expect(email.value).toBe('atiksujon7@gmail.com');
      const submit = screen.getByRole('button');
      fireEvent.click(submit);
       expect(handleUserAdd).toHaveBeenCalledTimes(1);
     });

در تست فوق، ابتدا کامپوننت UserForm را رندر می کنیم و سپس فیلدهای نام کاربری و ورودی ایمیل را با استفاده از test-id آنها دریافت می کنیم. تایپ را در فیلدها شبیه سازی می کنیم و سپس دکمه ارسال را کلیک می کنیم. بررسی می کنیم که آیا تابع onUserAdd یک بار فراخوانی شده است یا خیر.

در نهایت، بیایید تست دیگری را با استفاده از صفحه کلید بنویسیم و کلیک کنیم:

test('test using keyboard and click', () => {
  const handleUserAdd = jest.fn();
  render(<UserForm onUserAdd={handleUserAdd} />);

  //Find the tow inputs
  const [nameInput, emailInput] = screen.getAllByRole('textbox');

  //simulate typng in a name
  userEvent.click(nameInput);
  userEvent.keyboard('Rahman');

  //simulate typing in an email

  userEvent.click(emailInput);
  userEvent.keyboard('atiksujon7@gmail.com');

  //Find the submit button
  const submitButton = screen.getByText('Submit');
  userEvent.click(submitButton);

  expect(handleUserAdd).toHaveBeenCalledTimes(1);
});

در این تست از کتابخانه userEvent برای شبیه سازی تعاملات کاربر استفاده می کنیم. ابتدا روی قسمت ورودی نام کلیک می کنیم و سپس به روش صفحه کلید عبارت Rahman را تایپ می کنیم. برای فیلد ورودی ایمیل نیز همین کار را انجام می دهیم. بعد از تایپ روی دکمه ارسال کلیک می کنیم. بررسی می کنیم که آیا تابع onUserAdd یک بار فراخوانی شده است یا خیر.

در پایان، ما یک برنامه React را با استفاده از userEvent و testing-library با موفقیت آزمایش کردیم. ما فیلدهای ورودی و دکمه ارسال یک جزء UserForm را آزمایش کردیم.