نوشته شده توسط Eze Sunday✏️
اشکال زدایی بصری به توسعه دهندگان این امکان را می دهد که اجرای کد خود را در زمان واقعی مشاهده کنند و شناسایی و رفع مشکلات را آسان تر می کند. به ویژه هنگام کار با پایگاه های کد پیچیده با چندین قطعه متحرک مفید است.
قبل از استفاده از Vitest Preview برای تست و اشکال‌زدایی بصری، توصیه می‌شود که تجربه آزمایش واحد با استفاده از Vitest یا چارچوب‌های تست مشابه مانند Jest را داشته باشید. اگر در تست واحد با Vitest تازه کار هستید، ما یک راهنمای مبتدی نوشته‌ایم که نشان می‌دهد چگونه یک برنامه frontend را با Vitest آزمایش کنید. این راهنما به شما کمک می کند تا درک بهتری از تست واحد و نحوه اعمال آن در پروژه های خود به دست آورید.
پرش به جلو:
چرا اشکال زدایی بصری مهم است؟
اشکال زدایی بصری به چند دلیل مهم است. اول، به شما کمک می کند تا خطاها را مشخص کنید. اشکال زدایی بصری تشخیص دقیق منبع خطاها و اشکالات در کد را آسان تر می کند و در زمان و تلاش شما هنگام تلاش برای رفع مشکلات صرفه جویی می کند.
اشکال زدایی بصری به توسعه دهندگان این امکان را می دهد که ببینند کد آنها چگونه با سایر بخش های سیستم تعامل دارد و بینش ارزشمندی را در مورد رفتار آن ارائه می دهد. علاوه بر این، اشکال زدایی بصری به توسعه دهندگان کمک می کند تا مشکلات عملکرد بالقوه را در کد خود شناسایی کنند و به آنها امکان می دهد آن را برای عملکرد بهتر بهینه کنند.
با آسان کردن شناسایی و رفع مشکلات، اشکال زدایی بصری به توسعه دهندگان کمک می کند تا بهره وری و کارایی خود را افزایش دهند. به طور کلی، این یک ابزار ضروری برای اطمینان از قابلیت اطمینان و صحت نرم افزار است.
معرفی Vitest
Vitest یک چارچوب تست واحد جدید است که برای سرعت ساخته شده است. مطابق با آنتونی فو، خالق Vitest و عضو اصلی تیم Vite:
درست مانند نحوه عملکرد Vite در مرورگر، Vitest نیز نمودار ماژول های شما را می شناسد، که باعث می شود قادر به تشخیص هوشمند باشد و فقط تست های مربوطه را دوباره اجرا کند. تقریباً شبیه HMR است اما برای آزمایش.
بهترین بخش Vitest این است که تمام وابستگی ها و آزمایش های برنامه شما را تماشا می کند و اطمینان می دهد که تنها بخشی که به روز رسانی می شود دوباره اجرا می شود. بر اساس تجربه من در استفاده از هر دو فریمورک، Jest و Vitest در اولین اجرای خود عملکرد مشابهی داشتند. در همین حال، وایتست در اجرای مجدد بعدی عملکرد تست بهتری داشت. این به این دلیل است که Vitest فقط بخشی از آزمون یا منطق تجاری را اجرا می کند که به روز شده است.
در حالی که این یک ابزار فوق العاده قدرتمند است، اگر یک توسعه دهنده frontend بتواند آزمایش خود را تجسم کند، می تواند حتی قدرتمندتر باشد.
به عنوان مثال، وقتی تستی را اجرا می کنید که دو متغیر اضافه می کند، A + B، و قرار است برگردد C به صفحه نمایش، می خواهید ببینید که حساب انجام شده است. نتیجه همانطور که از نظر بصری انتظار می رفت با موفقیت روی صفحه نمایش داده شد. اینجاست که Vitest Preview وارد می شود.
Vitest Preview چیست؟
Vitest Preview به شما کمک می‌کند تا تست‌ها را سریع‌تر بنویسید و اشکال‌زدایی کنید و به شما امکان می‌دهد تست خود را در مرورگر تجسم کنید. اگر با Jest آشنایی دارید، می‌دانید که جامعه Jest ابزار اشکال‌زدایی مشابهی به نام Jest Preview دارد که توسط همان توسعه‌دهنده، Hung Viet Nguyen ایجاد شده است. برای کسب اطلاعات بیشتر در مورد آزمایش با Jest، راهنمای ویدیویی ما را در اینجا بررسی کنید.
در 24 اکتبر 2022، هونگ ویت نگوین راه اندازی Vitest Preview را با بیانیه زیر به طور عمومی اعلام کرد:
سوالی که معمولا از من پرسیده می شود این است که “آیا می توانم استفاده کنم؟ @jestPreview برای @vitest_dev“امروز، من راه اندازی می کنم @VitestPreview، برادر کوچک @JestPreview که بر روی @vite_js ساخته شده است، از @vitest_dev پشتیبانی درجه یک دارد و بسیار سریع است.
در ادامه این راهنما، به شما نشان می‌دهم که چگونه پیش‌نمایش Vitest را در مجموعه تست‌های Vite خود ادغام کنید تا به اشکال‌زدایی سریع‌تر و شهودی‌تر کمک کنید.
راه اندازی Vitest Preview برای اشکال زدایی
از آنجایی که ما روی آزمایش‌ها تمرکز خواهیم کرد، یک مخزن GitHub موجود را که برای این راهنما ایجاد کرده‌ام شبیه‌سازی می‌کنیم.
ابتدا دستورات زیر را برای کلون کردن مخزن و نصب تمام وابستگی ها اجرا کنید:
git clone https://github.com/ezesundayeze/vitest-preview-demo && npm install
فهرست برنامه کلون شده شما باید به این شکل باشد:
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── public
│ └── vitest.svg
├── src
│ ├── App.css
│ ├── App.tsx
│ ├── assets
│ │ └── vite.svg
│ ├── hooks
│ │ └── useCounter.ts
│ ├── index.css
│ ├── main.jsx
│ ├── test
│ │ ├── App.test.tsx
│ │ └── setup.ts
│ ├── utils
│ │ └── test-utils.tsx
│ └── vite.env.d.ts
├── tsconfig.json
└── vite.config.js
برنامه کلون شده یک پروژه اصلی React است که با کلیک کردن روی a یک شمارنده را افزایش می دهد دکمه. این یک نقطه شروع مشترک برای پروژه های React است که اغلب به عنوان برنامه React Starter شناخته می شود.
برای اینکه بتوانیم آزمایشی را با Vitest Preview اجرا کنیم، وابستگی های زیر را در پروژه خود نصب کرده ایم:
// package.json
"devDependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^12.1.5",
"@testing-library/react-hooks": "^8.0.0",
"@testing-library/user-event": "^13.5.0",
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"@types/testing-library__jest-dom": "^5.14.5",
"@vitejs/plugin-react": "^2.1.0",
"jsdom": "^20.0.1",
"npm-run-all": "^4.1.5",
"vite": "^3.1.8",
"vitest": "^0.24.3",
"vitest-preview": "^0.0.1",
}
ایجاد پروژه خود
برای ایجاد پروژه خود از ابتدا، می توانید از Vite برای داربست پروژه و نصب وابستگی های لازم مانند Vitest و vitest-previewهمانطور که قبلاً دیدیم. سپس می توانید استفاده کنید npm-run-all برای اجرای Vitest Preview و Vitest به صورت موازی. شما می توانید اضافه کنید npm-run-all به شما package.json برای راحتی فایل
به عنوان مثال، شما می توانید یک script در شما package.json فایل مانند این:
// package.json
...
"scripts": {
"start": "npm-run-all -p vitest-preview test",
},
...
رسیدگی به خطاها
یکی از مشکلات رایجی که هنگام راه اندازی یک پروژه جدید با Vitest Preview با آن مواجه شده ام، خطای زیر است:
Error: Cannot find module '…/build/Release/canvas.node'
یا
Error: Module did not self-register .../node_modules/canvas/build/Release/canvas.node
پیشنهادات زیادی برای رفع این مشکل در Stack Overflow و دیگر انجمن‌ها وجود دارد، اما طبق تجربه من، به سادگی نصب canvas وابستگی مشکل را حل کرد حتی زمانی که بعداً وابستگی را حذف کردم، این موضوع دوباره تکرار نشد. این رفتار ممکن است عجیب به نظر برسد، اما در گذشته برای من کارساز بوده است.
اگر با این مشکل مواجه شدید، ممکن است بخواهید نصب کنید canvas و ببینید که آیا مشکل را حل می کند. به خاطر داشته باشید، مراحل خاص برای رفع این مشکل ممکن است بسته به تنظیمات و پیکربندی خاص شما متفاوت باشد، بنابراین همیشه ایده خوبی است که به اسناد ابزارهای مورد استفاده خود مراجعه کنید و در صورت لزوم از انجمن کمک بگیرید.
اشکال زدایی بصری با Vitest Preview
اکنون که نسخه ی نمایشی را تنظیم کرده اید، بیایید یک آزمایش ساده بنویسیم. ابتدا در را باز کنید src/test/app.test.tsx فایل و تستی بنویسید که هفت را شبیه سازی کند button کلیک می کند و سپس تأیید می کند که count هفت افزایش یافته است.
تست ما اینجاست:
// src/test/App.test.ts
import App from '../App';
import { render, screen, fireEvent } from '../utils/test-utils';
import { debug } from 'vitest-preview';
describe('Simple working test', () => {
it('should increment count on click', async () => {
render(<App />);
const button = screen.getByRole('button');
for (let i = 0; i < 7; i++) {
fireEvent.click(button);
}
debug();
expect(await screen.findByText(/count is: 7/i)).toBeInTheDocument();
});
});
در کد بالا، ما را گرفتیم button عنصر و حلقه ای را اجرا کرد که هفت بار تکرار شد و هفت کلیک را شبیه سازی کرد. سپس، بررسی کردیم که هفت رندر شده است.
توجه کنید debug عملکرد در کد؟ اینجاست که Vitest Preview فراخوانی می شود و جادو را انجام می دهد. این کدی است که ما در حال آزمایش آن هستیم:
import { useCounter } from './hooks/useCounter';
import viteLogo from './assets/vite.svg';
import './App.css';
function App() {
const { count, increment } = useCounter();
return (
<div className="App">
<header className="App-header">
<p>
Hello <b>Vitest Preview</b>!
</p>
<div>
<img src={viteLogo} alt="Vite Logo" width={100} />
<img src="/vitest.svg" alt="Vitest Logo" width={100} />
</div>
<p>
<button className="counter" type="button" onClick={increment}>
count is: {count}
</button>
</p>
<p>
</p>
</header>
</div>
);
}
export default App;
اگرچه این یک تست استاندارد است، اما چیزی که آن را منحصربه‌فرد می‌کند این است که می‌توانیم پیش‌نمایش کرده و ببینیم که تعداد هفت بر روی صفحه نمایش داده شده است، همانطور که در زیر نشان داده شده است:
ایجاد آزمون دوم
بیایید تست دیگری برای مؤلفه ای ایجاد کنیم که دارای دو ورودی فرم است که اعداد را می پذیرد و وقتی کاربر فرم را ارسال می کند، مجموع اعداد را برمی گرداند.
اینم تست ما:
///src/test/Calculator.test.ts
import { render, screen, fireEvent } from "@testing-library/react";
import Calculator from "../Calculator";
import { debug } from "vitest-preview";
describe("Calculator", () => {
it("should add two numbers and display the result", async () => {
// Render the component
render(<Calculator />);
// Find the input fields and the button
const input1 = screen.getByLabelText("First number:");
const input2 = screen.getByLabelText("Second number:");
const button = screen.getByRole("button", { name: "Add numbers" });
// Enter values into the input fields
fireEvent.change(input1, { target: { value: "2" } });
fireEvent.change(input2, { target: { value: "3" } });
// Click the button
fireEvent.click(button);
debug();
// Assert that the result is displayed on the page
expect(await screen.findByText("The result is: 5")).toBeInTheDocument();
});
})
بیایید کد آن را نیز بنویسیم:
// src/Calculator.tsx
import { useState } from "react";
import './App.css';
const Calculator = () => {
// Declare two state variables, one for each input field
const [num1, setNum1] = useState(0);
const [num2, setNum2] = useState(0);
// Declare a state variable for the result of the calculation
const [result, setResult] = useState("");
// Define a function to handle the form submission
const handleSubmit = (event) => {
event.preventDefault();
// Convert the input values to numbers and add them
const sum = Number(num1) + Number(num2);
// Update the result state with the calculated sum
setResult(sum);
};
return (
<form onSubmit={handleSubmit}>
<label>
First number:
<input
type="number"
value={num1}
onChange={(event) => setNum1(event.target.value)}
/>
</label>
<label>
Second number:
<input
type="number"
value={num2}
onChange={(event) => setNum2(event.target.value)}
/>
</label>
<button type="submit">Add numbers</button>
{result && <div>The result is: {result}</div>}
</form>
);
};
export default Calculator;
این پیش‌نمایش هنگام اجرای آزمایش است: 
من آن اعداد را در فیلدهای ورودی تایپ نکردم. آزمایش همانطور که توضیح دادیم انجام شد. سپس، Vitest Preview مطمئن شد که می‌توانیم آن را در مرورگر پیش‌نمایش کنیم. همانطور که در ترمینال و به صورت بصری در زیر مشاهده می کنید، تمام تست ها در حال قبولی هستند: 
همانطور که می توانید بگویید، Vitest Preview می تواند در اشکال زدایی برنامه های فرانت اند بسیار مفید باشد، زیرا به شما امکان می دهد در زمان آزمایش خود بازخورد دریافت کنید که مستقیماً نحوه تعامل کاربران شما با برنامه شما را فراتر از داشتن یک مدل ذهنی از فرآیند شبیه سازی می کند.
نتیجه
توسعه Frontend هر روز سرگرم کننده تر می شود زیرا چندین ابزار متمرکز بر افزایش تجربه توسعه دهندگان ساخته می شوند. Vitest Preview یک ابزار ارزشمند تست بصری و اشکال زدایی است، صرف نظر از مقیاس پروژه شما. برای مطالعه بیشتر، باید مستندات را بررسی کنید.
آیا کتابخانه های جدید JS را برای بهبود عملکرد یا ایجاد ویژگی های جدید اضافه می کنید؟ اگر برعکس عمل کنند چه؟
شکی نیست که فرانت اندها پیچیده تر می شوند. همانطور که کتابخانه های جدید جاوا اسکریپت و وابستگی های دیگر را به برنامه خود اضافه می کنید، برای اطمینان از اینکه کاربران شما با مشکلات ناشناخته مواجه نمی شوند، به دید بیشتری نیاز دارید.
LogRocket یک راه حل مانیتورینگ برنامه کاربردی است که به شما امکان می دهد خطاهای جاوا اسکریپت را به گونه ای تکرار کنید که گویی در مرورگر شما اتفاق افتاده است تا بتوانید به طور موثرتری به باگ ها واکنش نشان دهید.
LogRocket بدون در نظر گرفتن چارچوب، با هر برنامه ای کاملاً کار می کند و دارای پلاگین هایی برای ثبت زمینه اضافی از Redux، Vuex، و @ngrx/store است. به جای حدس زدن چرایی مشکلات، می توانید در مورد وضعیتی که برنامه شما در هنگام بروز مشکل در آن قرار داشت، جمع آوری کرده و گزارش دهید. LogRocket همچنین بر عملکرد برنامه شما نظارت می کند، معیارهایی مانند بار CPU مشتری، استفاده از حافظه مشتری و موارد دیگر را گزارش می دهد.
با اطمینان بسازید – نظارت را به صورت رایگان شروع کنید.
