نوشتن تست ، در React.js به کمک Jest و Enzyme

خوب ، نوشتن تست ، یکی از مهمترین کاراییه که باید انجام بدیم .

هر برنامه نویس توی هر زبانی باید بتونه که تست رو بنویسه . الان دیگه اکثر بسترهایی که سیستم کنترل ورژن رو انجام میدن مثل گیتلب ، دارن کار تست رو همراه با کنترل ورژن چک میکنن که کد بدون تست بالا نره .

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

برای اینکه بخوایم تست بنویسیم ، من توصیم اینه که از JEST که یک فریم ورک سبک و خوانا برای نوشتن تست های جاوا اسکریپتی استفاده میشه و زیر نظر Facebook نوشته شده و معتبرتر از بقیه است و react هم با همین فریم ورک تست مینویسه .

کنار Jest از یک فریم ورک مکمل دیگه هم به اسم Enzyme استفاده میکنیم که ادعا های ما رو راحتتر میکنه.

نگارش تست ها

تست ها، مثل کد نویسی یک جریان قابل درک دارن. هر تست یک سری ادعا داره .

یعنی اینکه مثلا من ادعا میکنم که کامپوننتی که نوشتم ، دوتا عدد میگیره و جمع میکنه و باید مشاهده ادعای من ، نتیجه جمع دوتا عدد رو که به کامپوننت دادم رو return کنه .

خوب حالا میریم که enzyme رو نصب کنیم و شروع کنیم .

npm i enzyme enzyme-adapter-react-16 --only=dev

بعد از نصب ، باید تنظیمات آداپتور enzyme رو انجام بدیم . یک فایل به اسم enzyme.js بسازین داخل src.

import Enzyme, { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
export { shallow, mount, render };
export default Enzyme;

ما باید هر تستی که میخوایم بنویسیم ، enzyme.js رو ایمپورت کنیم توی اون تست .

معنی Shallow Rendering

عبارت shallow rendering ‌داخل enzyme به این معنی که شما به راحتی میتونید از کامپوننت تست بگیرید بدون اینکه نیاز باشه child رو داخل ادعا وارد کنید و نیازی باشه که ادعای شما از child پیروی کنه و اثر بگیره . خوب حالا من یک کامپوننت ساده مینویسم با ادعاش .

src/components/List.js

import React from 'react';
import PropTypes from 'prop-types';

function List(props) {
 const { items } = props;
 if (!items.length) {
 // No Items on the list, render an empty message
 return <span className="empty-message">No items in list</span>;
 }
 
 return (
 <ul className="list-items">
 {items.map(item => <li key={item} className="item">{item}</li>)}
 </ul>
 );
 }
 
 List.propTypes = {
 items: PropTypes.array,
 };
 List.defaultProps = {
 items: [],
 };
 export default List;

حالا با استفاده از jest و enzyme ادعاها رو مینویسیم .

src/tests/List.test.js

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

describe('List tests', () => {
 it('renders list-items', () => {
 const items = ['one', 'two', 'three'];
 const wrapper = shallow(<List items={items} />);
 // Expect the wrapper object to be defined
 expect(wrapper.find('.list-items')).toBeDefined();
 expect(wrapper.find('.item')).toHaveLength(items.length);
 });
 });

ادعای بالا داره میگه که ما یک آرایه با داده های one , two , three ‌داریم و میبریمش داخل کامپوننت List تا خروجی که به انتظار داریم بده ، یک List از داده های ما باشه . خوب تست یک خروجی قابل دیدن نداره و باید با راه های مختلفی ادعامون و انتظاراتمون رو ثابت کنیم .

ما توقع داریم که خروجی ما یک کلاس به اسم list-items ‌داشته باشه و همچنین تعداد لیست های ایجاد شده هم برابر با تعداد داده هامون ( سه عدد )‌ باشه . این دوتا انتظارات رو ما با expect نوشتیم . حالا نوبت اینه که تست رو اجرا کنیم :

npm run test

خروجی که میبینید به شما میگه که تست با موفقیت انجام شد یا نه .

کل کار تست نوشتن همینه . اما بهتره هم به jest و هم به enzyme مسلط بشید .

لینک ها رو بخونید :