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

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

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

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

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

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

اهمیت تست نویسی

نگارش تست ها

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

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

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

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

1	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;

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;

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 (

{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);
 });
 });

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);

});

آموزش جامع React Js

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

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

npm run test

1	npm run test

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

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

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

لینک اول

لینک دوم

اگر قصد یادگیری react js (ری اکت جی اس) به صورت حرفه ای و تخصصی را دارید، پیشنهاد می کنم آموزش جامع و پروژه محور react js را تماشا کنید

مطالب زیر را حتما مطالعه کنید

4 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

amirreza_tj7 گفت:

آگوست 27, 2021 در 1:44 ب.ظ

سلام و تشکر بابت سایت و مطالب خوبتون.
در دوره آموزش React.js راجع به نوشتن تست گفته شد.اما کامپوننتی که من می خوام براش تست بنویسم داخل یک hoc رپ شده و باعث میشه تستم خطا بده.وقتی بدون hoc تستش می کنم درسته.
در اینجور مواقع که ما داریم از hoc استفاده میکنیم چطور باید کامپوننت خودمون رو تست کنیم؟

پاسخ
- مهدی گفت:
  
  آگوست 27, 2021 در 5:49 ب.ظ
  
  سلام.خواهش میکنم
  باید ببینید hoc دقیقا چکاری انجام میده و برای اون تست بنویسید.اگربه طور مثال hoc فقط یک کامپپوننت رو میگیره و بر میگردونه.باید تست جوری نوشته بشه که مطمئن باشید hoc در هر شرایطی بر میگردونه کامپوننت رو
  اگر خود عملکرد کامپوننت تو تست درست هست پس نیازی به تغییر تست برای خود اون کامپوننت نیست
  
  پاسخ
رضا عمرانی گفت:

مارس 18, 2019 در 10:59 ق.ظ

خیلی خوب و کاربردی
تشکر میکنم

پاسخ
- علیرضا گفت:
  
  مارس 18, 2019 در 11:09 ق.ظ
  
  ممنون رضای عزیز
  پایدار باشی
  
  پاسخ

مطالب زیر را حتما مطالعه کنید

ویژگی ها و قابلیت های جدید react 18

فریمورک های Frontend که باید در سال 2021 یاد بگیرید

نگاه اولیه به React Server Component

React Higher Order Components چیست

5 React Best Practice که باید در سال 2020 یاد بگیرید

Hook های مفیدی که باید در پروژه بعدی React خود از آن استفاده کنید

4 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ