آموزش پیاده سازی تست نرم افزارهای ری اکت

در این درس می خواهیم قابلیت تست را به برنامه مان اضافه کنیم. و برای اینکار از چند کتابخانه مختلف استفاده میکنیم، بنابراین ابتدا باید این کتابخانه ها را نصب کنیم.

وابستگی ها

در این درس از کتابخانه های npm زیر استفاده می کنیم:

jest/jest-cli

jest یکی از فریمورک های رسمی تست است که توسط فیسبوک منتشر شده و یکی از بهترین فریمورک ها برای تست برنامه های ری اکت می باشد. سرعت این فریمورک بسیار بالاست و یک محیط sandbox را برای تست فراهم می کند. همچنین قابلیت تست snapshot و ... را هم دارد.

babel-jest/babel-preset-stage-0

تست های خود را با استفاده از stage-0 ( یا قابلیت های ES6) می نویسیم، چون می خواهیم مطمئن شویم فریمورک تست ما می تواند ES6 را خوانده و پردازش کند.

sinon

sinon یکی از کتابخانه های کاربردی است که برای تست برنامه های جاوا اسکریپت استفاده می شود. در ادامه این درس به شما می گویم که اینها چه هستند، اما در این مرحله ابتدا باید آنها را نصب کنیم.

react-addons-test-utils/enzyms

پکیج react/addons/test/util که توسط تیم توسعه دهنده گان ری اکت ارائه شده، کتابخانه های مفیدی را برای انجام تست را دارا می باشد.

Enzyme یکی از کتابخانه های کاربردی تست جاوا اسکریپت است که توسط شرکت معروف و مطرح AirBnB ارائه شده و کار کردن با آن بسیار راحت است و همچنین متدهای بسیار کاربردی را برای دستکاری و کنترل Dom مجازی ری اکت ارائه می دهد. در این قسمت از کتابخانه Enzyme که در پکیج react-addons-test-utils قرار گرفته برای تست کدهای برنامه خود بهره می بریم.

react-test-render

کتابخانه react-test-render به ما اجازه می دهد تا از ویژگی snapshot کتابخانه jest استفاده بکنیم. snapshot روشی است که کتابخانه jest با آن خروجی Dom مجازی را داخل یک فایل Serialize می کند تا ما بتوانیم به طور خودکار یک تست را با بقیه تست ها مقایسه کنیم.

react-mock-store

کتابخانه redux-mock-store به ما اجازه می دهد تا به آسانی یک redux store برای انجام عملیات تست ایجاد کنیم. از این کتابخانه برای تست actionCreator، middleware ها و reducer ها استفاده می کنیم. برای نصب تمام این کتابخانه ها، دستور زیر را در ترمینال و در مسیر روت پروژه اجرا کنید:

yarn add --dev babel-jest babel-preset-stage-0 enzyme jest-cli react-addons-test-utils react-test-renderer redux-mock-store sinon

پیکربندی

بعد از نصب کتابخانه ها، باید یک سری پیکربندی هایی را انجام دهیم. ابتدا یک اسکریپت به فایل پیکربندی پروژه اضافه می کنیم تا بتوانیم با دستور npm test اقدام به تست برنامه بکنیم که برای اینکار در فایل package.json که در روت پروژه قرار دارد، یک اسکریپت test اضافه می کنیم. حال کلید scripts را در فایل package.json پیدا کرده و دستور test را مانند زیر به آن اضافه کنید.

{
  // ...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "test": "react-scripts test --env=jsdom"
  },
}

نوشتن تست ها

حال می خواهیم بررسی کنیم تا ببینیم که آیا تنظیمات تست به خوبی کار می کند یا خیر. کتابخانه jest به طور خودکار فایل های تست که در دایرکتوری __test__ قرار گرفته باشند را پردازش می کند. پس ابتدا یک دایرکتوری به نام __test__ را در مسیر src/component/Timeline ایجاد کرده و اولین فایل تست را در این فایل می نویسیم.

mkdir src/components/Timeline/__tests__
touch src/components/Timeline/__tests__/Timeline-test.js

فایل Timeline-test.js شامل تمام تست هایی است که ما برای کامپوننت های Timeline نوشته ایم. پس اولین تست را برای کامپوننت Timeline ایجاد می کنیم.

تست های خود را با استفاده از فریمورک jasmin می نویسیم. jasmin تعدادی متد ارائه می دهد که می توانیم از آنها استفاده نماییم.

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

این متدها عبارتند از:

• ()describe
• ()it

متد ()describe به ما این امکان را می دهد تا بتوانیم تست های خود را در دسته های منطقی گروه بندی کنیم. چون ما چندین تست را برای کامپوننت Timeline می نویسیم، از متد ()describe در تست استفاده کرده تا مشخص کنیم که ما می خواهیم Timeline را مورد ازریابی قرار دهیم.

کدهای زیر را در فایل src/components/Timeline/__test__/Timeline-test.js اضافه کنید:

describe('Timeline', () => {

});

حال توسط متد ()it اولین تست خود را اضافه میکنیم. در این تست یکبار برای موقعی که برنامه عملیات تست را با موفقیت پشت سر گذاشته و دفعه بعد در صورت شکست عملیات کارهای خود را انجام می دهیم.

در همان فایل، دو تست زیر را اضافه کنید:

describe('Timeline', () => {

  it('passing test', () => {
    expect(true).toBeTruthy();
  })

  it('failing test', () => {
    expect(false).toBeTruthy();
  })
})

در بالا تمام حالات ممکن که می خواهیم برای آنها تست انجام دهیم را اضافه کردیم. حال ابتدا باید تست های خود را اجرا کنیم.

اجرای تست

پکیج create-react-app با استفاده از jest یک محیط تست را برای ما فراهم کرده است. حال توسط دستور npm test یا yarn test می توانیم تست های خود را اجرا کنیم.

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

yarn test

در خروجی بالا، دو تست را می بینیم که یک تست pass شده ( که با علامت سبزرنگ مشخص شده) و یک تست با شکست مواجه شده (که با علامت قرمز مشخص شده است).

بنابراین تستی که علامت آن Pass و سبز رنگ است یعنی خروجی مورد انتظار ما را فراهم می کند و از طرفی تستی که به رنگ قرمز می باشد، یعنی خروجی قابل قبولی ندارد.

پیش بینی تست ها

jest به طور پیش فرض چند دستور سراسری ارائه می دهد، یکی از آنها دستور ()expect است. دستور ()expect چند پیش بینی می گیرد که ما می توانیم آنها را فراخوانی کنیم که دوتای آنها را قبلا دیدیم:

• toBeTruthy()
• toBeFalsy()
• toBe()
• toEqual()
• toBeDefined()
• toBeCalled()

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

حال توانستیم اولین تست خودرا نوشته و تنظیمات آن را با موفقیت انجام بدهیم، در درس بعدی کامپوننت Timeline را به تست خواهیم کرد.