برنامه نویسی

Jest چیست و چگونه از آن استفاده کنیم؟

Jest یک فریمورک تست برنامه‌نویسی برای جاوااسکریپت است که بخصوص برای تست کد‌های React و Node.js طراحی شده است. Jest توسط فیس‌بوک توسعه داده شده و از ویژگی‌های آن می‌توان به سرعت، سادگی استفاده، امکان اجرای تست‌ها به صورت موازی، و امکان mock کردن توابع اشاره کرد.

از Jest می‌توان برای انجام تست‌های واحد (unit tests)، تست‌های اجتماعی (integration tests) و تست‌های عملکردی (functional tests) استفاده کرد. Jest همچنین دارای ابزارهایی برای تولید گزارش‌های تست و نظارت بر تغییرات کد (watch mode) است.

آیا Jest فقط برای React کاربردی است؟

Jest در اصل برای تست کردن کدهای جاوااسکریپت طراحی شده است و به عنوان یک فریم‌ورک تست برنامه‌نویسی چندمنظوره عمل می‌کند. اگرچه Jest به خوبی با React سازگار است و برای تست کردن کدهای React بسیار مورد استفاده قرار می‌گیرد، اما Jest عموماً برای تست کردن کدهای جاوااسکریپت در هر نوع پروژه‌ای قابل استفاده است، از جمله Node.js، Angular، Vue.js و سایر فریم‌ورک‌ها یا کتابخانه‌های جاوااسکریپت.

بنابراین، Jest نه تنها برای React مناسب است بلکه می‌توانید از آن برای تست کردن کدهای جاوااسکریپت در پروژه‌هایی با فریم‌ورک‌ها و کتابخانه‌های مختلف استفاده کنید.

Jest و فریم‌ورک‌های دیگر

Jest اصلی‌ترین ترکیباتی که با آنها استفاده می‌شود React و Node.js هستند. اما Jest قابلیت کار با سایر فریم‌ورک‌ها و کتابخانه‌های جاوا اسکریپت را نیز دارد. برخی از فریم‌ورک‌ها و کتابخانه‌هایی که Jest با آنها سازگار است عبارتند از:

  1. Angular: می‌تواند برای تست کردن کدهای Angular استفاده شود.
  2. Vue.js: همچنین می‌تواند برای تست کردن کدهای Vue.js استفاده شود.
  3. Express.js: برای تست کردن سرورهای Node.js که با Express.js پیاده‌سازی شده‌اند، Jest بسیار مناسب است.
  4. Redux: معمولاً با Redux کار می‌کند و برای تست کردن اکشن‌ها، ردیوسرها و ترکیبی‌های Redux کاربرد دارد.

به طور کلی، Jest به عنوان یک فریمورک تست چند منظوره برای جاوا اسکریپت طراحی شده است و می‌تواند با بسیاری از فریمورک‌ها و کتابخانه‌های جاوا اسکریپت مورد استفاده قرار بگیرد.

آشنایی با قابلیت‌های کاربردی Jest

Jest یک فریم ورک تست جاوااسکریپت قدرتمند است که برای تست نوشته‌های جاوااسکریپت و React طراحی شده است. این فریم ورک دارای ویژگی‌ها و قابلیت‌های زیر می‌باشد:

ویژگی‌ها:

  1. سرعت: Jest به صورت پیش‌فرض بسیار سریع است و به شما اجازه می‌دهد تست‌های خود را به سرعت اجرا کنید.
  2. سادگی: Jest بسیار ساده برای استفاده است و برای بسیاری از موارد نیاز به تنظیمات کمی دارد.
  3. Snapshot Testing: Jest از Snapshot Testing پشتیبانی می‌کند که امکان ذخیره و مقایسه خودکار اشیاء تولیدی در تست‌های شما را فراهم می‌کند.
  4. Mock Functions: این فریم‌ورک قابلیت ایجاد توابع موک را برای شبیه‌سازی عملکرد کدها در تست‌ها فراهم می‌کند.
  5. Async Testing: Jest به خوبی با تست‌های نیازمند انتظار برای اجرا منطبق است و امکان تست کدهایی که نیاز به زمان برای اجرا دارند را فراهم می‌کند.

قابلیت‌ها:

  1. Auto Mocking: Jest می‌تواند ماژول‌های خارجی را به صورت خودکار موک کند که باعث ساده‌تر شدن فرایند تست‌ها می‌شود.
  2. Code Coverage: Jest دارای امکانات Code Coverage برای اندازه‌گیری پوشش کد تست‌های شما است.
  3. Watch Mode: Jest امکان Watch Mode را فراهم می‌کند که به شما امکان مشاهده تغییرات در کد و اجرای تست‌ها بر اساس آن تغییرات را می‌دهد.
  4. Snapshot Testing: این قابلیت به شما امکان می‌دهد تا Snapshot‌هایی از کامپوننت‌ها، صفحات یا داده‌های خود ایجاد کنید و به صورت خودکار مقایسه کنید.
  5. محیط تست ایمن: Jest اطمینان می‌دهد که تست‌های شما در یک محیط ایمن اجرا می‌شوند تا از تداخل با تست‌های دیگر یا کدهای اصلی جلوگیری کند.

از آنجایی که Jest یک ابزار قدرتمند برای تست جاوااسکریپت و React است، این ویژگی‌ها و قابلیت‌ها آن را یک انتخاب بسیار محبوب برای توسعه دهندگان می‌کند.

سازگاری Jest با TypeScript

بله، Jest با TypeScript سازگاری دارد و از آن برای تست کردن کدهای نوشته شده با TypeScript پشتیبانی می‌کند. این امکان به توسعه دهندگان اجازه می‌دهد تا تست‌های واحد و اجتماعی را بر روی کدهای TypeScript خود اجرا کنند.

برای استفاده از Jest با TypeScript، می‌توانید مراحل زیر را دنبال کنید:

  1. نصب ماژول‌های مورد نیاز:
    ابتدا باید ماژول‌های مورد نیاز برای Jest و TypeScript را نصب کنید. به عنوان مثال:
   npm install --save-dev jest ts-jest @types/jest typescript
  1. پیکربندی Jest برای TypeScript:
    برای پیکربندی Jest برای استفاده با TypeScript، باید یک فایل tsconfig.json بسازید و تنظیمات لازم برای TypeScript خود را در آن تعیین کنید.
  2. پیکربندی Jest:
    در فایل jest.config.js خود، باید تنظیمات مربوط به Jest و TypeScript را اعمال کنید. مطمئن شوید که از ts-jest برای پردازش فایل‌های TypeScript استفاده می‌کنید.
  3. ایجاد تست‌ها:
    حالا می‌توانید فایل‌های تست خود را برای کدهای TypeScript خود ایجاد کنید و تست‌های مورد نیاز خود را اضافه کنید.
  4. اجرای تست‌ها:
    با استفاده از دستور npx jest یا دستورهای مشابه می‌توانید تست‌های خود را اجرا کرده و نتایج را بررسی کنید.

با این مراحل، شما می‌توانید Jest را به‌خوبی برای تست کردن کدهای خود نوشته با TypeScript استفاده کنید.

مثال کاربردی Jest تست یک کامپوننت React

برای تست یک کامپوننت React با استفاده از Jest و Enzyme می‌توانید به صورت زیر عمل کنید. ابتدا مطمئن شوید که Enzyme و تمام پیش‌نیازهای آن نصب شده باشند. سپس دو فایل را ایجاد کنید: یکی برای کامپوننت React خود و دیگری برای تست آن.

فرض کنید کامپوننت شما به این شکل است:

// MyComponent.js

import React from 'react';

const MyComponent = ({ name }) => {
  return <div>Hello, {name}!</div>;
};

export default MyComponent;

حالا یک فایل تست ایجاد کنید:

// MyComponent.test.js

import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders correctly', () => {
    const wrapper = shallow(<MyComponent name="World" />);
    expect(wrapper.find('div').text()).toEqual('Hello, World!');
  });

  it('renders with a different name', () {
    const wrapper = shallow(<MyComponent name="Alice" />);
    expect(wrapper.find('div').text()).toEqual('Hello, Alice!');
  });
});

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

npx jest MyComponent.test.js

اگر Enzyme را نصب نکرده‌اید، می‌توانید آن را با دستور زیر نصب کنید:

npm install --save-dev enzyme enzyme-adapter-react-16

و به فایل تست خود adapter مربوطه را اضافه کنید:

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

این‌ها مراحل اصلی برای تست کردن یک کامپوننت React با Jest و Enzyme هستند. این روش به شما امکان می‌دهد تا عملکرد کامپوننت‌های React خود را به صورت خودکار تست کرده و از صحت آنها اطمینان حاصل کنید.

چگونه می‌توانم Jest را با Angular ادغام کنم؟

برای ادغام Jest با Angular و انجام تست‌های واحد و اجتماعی بر روی کدهای Angular خود، می‌توانید مراحل زیر را دنبال کنید:

  1. نصب Jest:
    ابتدا Jest را در پروژه Angular خود نصب کنید. برای این کار از دستور زیر استفاده کنید:
   npm install --save-dev jest @angular-builders/jest
  1. پیکربندی Jest:
    برای پیکربندی Jest در پروژه Angular خود، یک فایل jest.config.js ایجاد کنید و تنظیمات مربوطه را در آن قرار دهید. به عنوان مثال:
   module.exports = {
     preset: 'jest-preset-angular',
     setupFilesAfterEnv: ['/src/setupJest.ts'],
   };
  1. اضافه کردن فایل‌های تست:
    فایل‌های تست خود را در پوشه‌ای مانند src ایجاد کنید و آنها را به پروژه خود اضافه کنید.
  2. اجرای تست‌ها:
    برای اجرای تست‌ها، از دستور زیر استفاده کنید:
   npx jest
  1. تنظیمات بیشتر (اختیاری):
    ممکن است نیاز داشته باشید تا تنظیمات بیشتری برای Jest در Angular خود اعمال کنید. بهتر است مستندات Jest و Angular را مطالعه کنید تا بتوانید تنظیمات دقیق‌تری برای نیازهای خاص خود اعمال کنید.

با این مراحل، شما Jest را با Angular خود ادغام کرده و می‌توانید تست‌های واحد و اجتماعی بر روی کدهای Angular خود را اجرا کنید.

تست یک تابع Async با Jest

برای تست کردن یک تابع async با استفاده از Jest، می‌توانید از مفهوم Promise و async/await استفاده کنید. در زیر یک مثال برای تست یک تابع async با Jest آورده شده است:

فرض کنید یک تابع async به نام fetchData دارید که یک API را فراخوانی می‌کند و داده‌ها را برمی‌گرداند:

// fetchData.js

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

module.exports = fetchData;

حالا یک فایل تست برای این تابع async ایجاد کنید:

// fetchData.test.js

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

test('fetchData returns the correct data', async () => {
  const data = await fetchData();
  expect(data).toEqual({ key: 'value' }); // اینجا یک مقدار مثال است که انتظار دارید از API دریافت شود
});

توجه:

  • Jest به طور پیش‌فرض توانایی انتظار یک Promise را دارد. با استفاده از کلیدواژه async در تست‌ها، می‌توانید توابع async را به راحتی تست کنید.
  • Jest خودکار انتظار می‌رود که تابع تست شما یک Promise را برگرداند و می‌توانید از await برای انتظار اجرای تابع async در تست استفاده کنید.
  • اگر تابع async شما با خطا مواجه می‌شود، Jest خودکار تست را ناموفق می‌کند. می‌توانید از try/catch برای گرفتن خطاها و اعلام آنها در تست استفاده کنید.

حالا شما می‌توانید تابع async خود را با Jest تست کرده و اطمینان حاصل کنید که عملکرد آن به درستی است.

اجرا خودکار تست ها با Jest

برای اجرای خودکار تست‌ها با Jest می‌توانید از قابلیت “watch mode” یا “گزارش‌دهی خودکار” آن استفاده کنید. این قابلیت‌ها به شما امکان می‌دهند تا تغییرات در کد خود را مشاهده کرده و تست‌ها را خودکار اجرا کنید. برای این کار می‌توانید از دو روش زیر استفاده کنید:

Watch Mode:

Watch Mode به شما این امکان را می‌دهد که تغییراتی که در کد ایجاد می‌شود را مشاهده کرده و تست‌ها را خودکار اجرا کنید. برای اجرای Jest در حالت Watch Mode، می‌توانید از دستور زیر استفاده کنید:

npx jest --watch

گزارش‌دهی خودکار:

برای اجرای تست‌ها به صورت خودکار و گزارش‌دهی نتایج، می‌توانید از پلاگین‌های گزارش‌دهی برای Jest مانند jest-html-reporter یا jest-junit استفاده کنید. این پلاگین‌ها به شما امکان می‌دهند تا گزارش‌های تست خود را به صورت خودکار ایجاد کرده و نتایج را بررسی کنید.

برای مثال، برای نصب و استفاده از jest-html-reporter، از دستورات زیر استفاده کنید:

npm install --save-dev jest-html-reporter

سپس در فایل jest.config.js خود تنظیمات زیر را اعمال کنید:

module.exports = {
  reporters: [
    'default',
    ['jest-html-reporters', {
      publicPath: './html-report',
      filename: 'report.html',
      expand: true
    }]
  ]
};

با این تنظیمات، Jest گزارش HTML تست‌های خود را ایجاد خواهد کرد.

جمع بندی: چطور می‌توانم تست‌های Jest را شروع کنم؟

Jest یک ابزار تست خودکار پرکاربرد برای JavaScript است که توسط Facebook توسعه یافته است. با Jest می‌توانید به راحتی تست‌های خودکار برای کدها و برنامه‌های خود بنویسید و از صحت عملکرد آنها مطمئن شوید. این ابزار دارای امکاناتی همچون پوشش تست، ماکینگ و اسپایینگ است که آن را به یکی از بهترین گزینه‌ها برای تست برنامه‌های JavaScript می‌سازد. Jest کمک می‌کند تا تست‌ها را با سرعت بیشتری بنویسید، خطاهای کد را سریع‌تر شناسایی کنید و کیفیت پروژه‌های خود را بهبود بخشید. این ابزار فرآیند توسعه را آسان‌تر و لذت‌بخش‌تر می‌کند، بنابراین پیشنهاد می‌شود با Jest آشنا شوید و از قابلیت‌های فوق‌العاده آن بهره‌مند شوید. از امروز شروع کرده و وارد دنیای جذاب تست خودکار با Jest شوید! موفق باشید!

پوریا گودرز

پوریا گودرز هستم‌ علاقه مند به مباحث‌ و‌‌ مشکلات مربوط به تکنولوژی و فناوری. همچنین اندک آشنایی در زمینه گرافیک دارم. امیدوارم بتونم مشکلات شما رو در این مباحث حل کنم . انتقادات خود را از بخش نظرات با من در میان بگذارید :)

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *