تست واحد با Jest – انجمن DEV

Summarize this content to 400 words in Persian Lang
بیایید بررسی کنیم ماژول 15: تست واحد با جست در جزئیات تمرکز این ماژول آموزش نحوه انجام تست های واحد با استفاده از استیک چارچوب تست محبوب برای برنامه های جاوا اسکریپت، به ویژه در پروژه های React. ما مقدمه تست واحد، نصب و استفاده از Jest و نوشتن و اجرای تست ها در React را پوشش خواهیم داد.

1. مقدمه ای بر تست واحد

تست های واحد چیست؟

تست واحد روشی برای آزمایش اجزا یا توابع به صورت مجزا است تا اطمینان حاصل شود که هر قسمت از کد شما مطابق انتظار کار می کند. آنها نوشته شده اند تا تأیید کنند که یک “واحد” کد خاص (یک تابع، روش یا جزء) مطابق با مشخصات به درستی رفتار می کند.

در زمینه برنامه‌های React، تست‌های واحد می‌توانند تأیید کنند که مؤلفه‌ها، توابع و قلاب‌ها به درستی کار می‌کنند و وضعیت، رویدادها و رندرهای خود را به روش مورد انتظار مدیریت می‌کنند.

مزایای تست واحد

سهولت نگهداری: تست ها به شناسایی سریع مشکلات در کد و جلوگیری از رگرسیون (خطاهایی که پس از تغییرات ظاهر می شوند) کمک می کند.

اعتماد به نفس بیشتر: با اطمینان از اینکه هر واحد کد به صورت مجزا کار می کند، می توانید کد را با اطمینان بیشتری تغییر دهید.

مستندات: تست‌ها به شما کمک می‌کنند بفهمید که چگونه انتظار می‌رود کد کار کند و به عنوان شکلی از مستندات عمل کند.

2. نصب و استفاده از Jest

Instalando در مورد بله

Jest یک چارچوب آزمایشی است که یک API ساده و قدرتمند برای ایجاد و اجرای تست ها ارائه می دهد. اگر از یک پروژه React استفاده می کنید، اگر پروژه خود را با آن ایجاد کرده باشید، ممکن است Jest قبلاً نصب شده باشد ایجاد React App.

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

نصب کننده o بله: ترمینال را باز کنید و دستور زیر را برای نصب Jest به عنوان یک وابستگی توسعه اجرا کنید:

npm install –save-dev jest

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Babel را نصب کنید (در صورت لزوم): اگر از Babel برای جابجایی کدهای جاوا اسکریپت مدرن استفاده می کنید، ممکن است لازم باشد بسته از پیش تنظیم شده را برای Jest نصب کنید:

npm install –save-dev @babel/preset-env @babel/preset-react

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سپس یک فایل پیکربندی Babel ایجاد کنید (babel.config.js) در پروژه خود با محتوای زیر:

module.exports = {
presets: [‘@babel/preset-env’, ‘@babel/preset-react’],
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

یک تست اسکریپ اضافه کنید: نه package.json، یک اسکریپت برای اجرای تست ها با Jest اضافه کنید. در اینجا یک نمونه پیکربندی است:

“scripts”: {
“test”: “jest”
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اکنون می توانید تست ها را با:

npm test

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

راه اندازی اولیه

اگر Create React App را پیکربندی کرده باشید، Jest به طور خودکار نصب شده و آماده استفاده است. اگر نه، مراحل ذکر شده را دنبال کنید تا اطمینان حاصل کنید که نصب Jest به درستی انجام شده است.

3. نوشتن و اجرای تست با Jest در React

ساختار یک تست با جست

تست‌های جست معمولاً از ساختار ساده‌ای پیروی می‌کنند که از سه بخش اصلی تشکیل شده است:

describe: تست های مربوط به گروه ها.

it یا test: یک مورد آزمایشی خاص را تعریف می کند.

expect: در مورد اینکه کد باید چه چیزی را برگرداند یا چگونه باید رفتار کند، بیانیه ای می دهد.

نمونه آزمون پایه:

describe(‘Testando a função soma’, () => {
it(‘Deve somar dois números corretamente’, () => {
const resultado = soma(1, 2);
expect(resultado).toBe(3); // A expectativa é que o resultado seja 3
});
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال:

describe برای گروه بندی آزمایش یک تابع خاص استفاده می شود (soma).

it یک مورد آزمایشی را توصیف می کند که بررسی می کند آیا مجموع 1 و 2 به 3 می رسد یا خیر.

expect(resultado).toBe(3) بررسی می کند که آیا ارزش resultado برابر با 3 است.

تست توابع ساده

بیایید در نظر بگیریم که یک تابع ساده داریم soma که دو عدد را جمع می کند:

function soma(a, b) {
return a + b;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای آزمایش این تابع با Jest، یک تست واحد ساده مانند زیر می نویسید:

فایل تست soma.test.js:

const soma = require(‘./soma’);

describe(‘Função soma’, () => {
it(‘Deve retornar a soma correta de dois números’, () => {
expect(soma(1, 2)).toBe(3);
expect(soma(-1, 1)).toBe(0);
expect(soma(-1, -1)).toBe(-2);
});
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

describe: تست های تابع را گروه بندی می کند soma.

it: آزمایش می کند که آیا تابع مقادیر مورد انتظار را برای ورودی های مختلف برمی گرداند یا خیر.

expect: بیانیه toBe بررسی می کند که آیا مقدار بازگردانده شده توسط تابع برابر با مقدار مورد انتظار است یا خیر.

تست کامپوننت های React

هنگامی که برای اجزای React تست می نویسید، می توانید از آن استفاده کنید کتابخانه تست واکنش همراه با جست کتابخانه تست React به شما امکان می دهد تعاملات کاربر را شبیه سازی کنید و رندر و رفتار اجزا را تأیید کنید.

در اینجا مثالی از نحوه آزمایش یک جزء ساده React آورده شده است:

جزء Button.js:

import React, { useState } from ‘react’;

function Button() {
const [clicked, setClicked] = useState(false);

const handleClick = () => {
setClicked(!clicked);
};

return (
<button onClick={handleClick}>
{clicked ? ‘Clicked!’ : ‘Click me’}
</button>
);
}

export default Button;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تست کامپوننت با کتابخانه تست Jest و React:

import { render, fireEvent } from ‘@testing-library/react’;
import Button from ‘./Button’;

describe(‘Button component’, () => {
it(‘Deve alternar o texto ao ser clicado’, () => {
const { getByText } = render(<Button />);

// Verifica se o texto inicial é “Click me”
expect(getByText(‘Click me’)).toBeInTheDocument();

// Simula o clique no botão
fireEvent.click(getByText(‘Click me’));

// Verifica se o texto foi alterado para “Clicked!”
expect(getByText(‘Clicked!’)).toBeInTheDocument();
});
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح تست:

render(): کامپوننت را رندر می کند Button.

getByText: عنصری را با متن “Click me” پیدا می کند.

fireEvent.click: کلیک روی دکمه را شبیه سازی می کند.

expect(getByText(‘Clicked!’)).toBeInTheDocument(): بررسی می کند که آیا پس از کلیک، متن به “کلیک شده!” تغییر کرده است یا خیر.

Tipos de Expectativas (مسابقه)

Jest چندین پیشنهاد می دهد مسابقات (روش های مقایسه) تا در مورد وضعیت کد خود اظهار نظر کنید. در اینجا تعدادی از پرکاربردترین آنها آورده شده است:

toBe: برابری (برای مقادیر اولیه) را بررسی می کند.

toEqual: برابری عمیق (برای اشیا و آرایه ها) را بررسی می کند.

toBeTruthy / toBeFalsy: بررسی می کند که آیا مقدار وجود دارد یا خیر true یا false.

toBeInTheDocument: بررسی می کند که آیا عنصری در DOM وجود دارد (مفید برای React Testing Library).

toHaveBeenCalled: بررسی می کند که آیا یک تابع فراخوانی شده است یا خیر.

4. اجرای تست ها

پس از نوشتن تست ها، می توانید آنها را با دستور زیر اجرا کنید:

npm test

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Jest به طور خودکار فایل هایی را با پسوند جستجو می کند .test.js یا .spec.js و تست های موجود در آن را اجرا خواهد کرد.

اجرای تست ها در حالت تعاملی

Jest یک رابط تعاملی ارائه می دهد که به شما امکان می دهد تست هایی را که باید اجرا کنید را انتخاب کنید. برای استفاده، به سادگی اجرا کنید:

npm test — –watch

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این کار باعث می شود که Jest به تغییرات در کد گوش دهد و تست ها را دوباره به صورت خودکار اجرا کند.

نتیجه گیری

در این ماژول، شما یاد گرفتید که چگونه:

نصب کننده o بله و محیط تست را پیکربندی کنید.
برای نوشتن تست های واحد برای توابع و اجزای موجود در React.
برای استفاده ادعاها از Jest برای تأیید رفتار مورد انتظار کد.
تست ها را بنویسید خودکار برای اجزای React با استفاده از کتابخانه تست واکنش.

تست واحد بخش مهمی از توسعه نرم افزار است، زیرا کمک می کند تا اطمینان حاصل شود که کد شما به درستی کار می کند و تغییرات بعدی عملکرد موجود را خراب نمی کند.

   npm install --save-dev jest

   npm install --save-dev @babel/preset-env @babel/preset-react

   module.exports = {
     presets: ['@babel/preset-env', '@babel/preset-react'],
   };

   "scripts": {
     "test": "jest"
   }

   npm test

describe('Testando a função soma', () => {
  it('Deve somar dois números corretamente', () => {
    const resultado = soma(1, 2);
    expect(resultado).toBe(3); // A expectativa é que o resultado seja 3
  });
});

function soma(a, b) {
  return a + b;
}

const soma = require('./soma');

describe('Função soma', () => {
  it('Deve retornar a soma correta de dois números', () => {
    expect(soma(1, 2)).toBe(3);
    expect(soma(-1, 1)).toBe(0);
    expect(soma(-1, -1)).toBe(-2);
  });
});

import React, { useState } from 'react';

function Button() {
  const [clicked, setClicked] = useState(false);

  const handleClick = () => {
    setClicked(!clicked);
  };

  return (
    <button onClick={handleClick}>
      {clicked ? 'Clicked!' : 'Click me'}
    </button>
  );
}

export default Button;

import { render, fireEvent } from '@testing-library/react';
import Button from './Button';

describe('Button component', () => {
  it('Deve alternar o texto ao ser clicado', () => {
    const { getByText } = render(<Button />);

    // Verifica se o texto inicial é "Click me"
    expect(getByText('Click me')).toBeInTheDocument();

    // Simula o clique no botão
    fireEvent.click(getByText('Click me'));

    // Verifica se o texto foi alterado para "Clicked!"
    expect(getByText('Clicked!')).toBeInTheDocument();
  });
});

npm test

npm test -- --watch