در تجربه اخیرم، با چالش ادغام چارچوب تست Jest در یک موجود مواجه شدم Vue3 js پروژه ای که با سریع. من در یافتن راهنمای نصب مفید در وبلاگ های مختلف با مشکل مواجه شدم. با این حال، پس از چندین بار تلاش و تلاش زیاد، در نهایت یک راه حل پیدا کردم. در این پست وبلاگ، هدف من ارائه راهنمای نصب گام به گام است که می تواند به دیگرانی که ممکن است با همین چالش مواجه شوند کمک کند.
تست واحد وجود دارد 🧪
Jest که توسط فیس بوک توسعه داده شده است، یک چارچوب آزمایشی جاوا اسکریپت پرکاربرد است. این به طور خاص برای آزمایش برنامه های جاوا اسکریپت، از جمله فریم ورک های فرانت اند مانند React، Vue، و Angular، و همچنین برنامه های کاربردی Node.js طراحی شده است. هدف اصلی Jest ارائه یک تجربه آزمایشی کاربرپسند و جامع به کاربران است که از طریق مجموعه ویژگی های گسترده و عملکردهای داخلی فراگیر آن به دست می آید. در اینجا می توانید اطلاعات بیشتری در مورد Jest پیدا کنید.
پیش نیازها 📋
قبل از ادامه، مطمئن شوید که پیش نیازهای زیر را دارید:
-
Node.js (نسخه 14 یا بالاتر) و npm (Node Package Manager) روی دستگاه شما نصب شده است.
-
دانش اولیه Vue.js و ابزار ساخت Vite. در صورت نیاز، می توانید به مستندات Vue3js و Vite مراجعه کنید.
مرحله 1: Jest را در پروژه خود راه اندازی کنید 🚀
برای شروع، با استفاده از رابط خط فرمان دلخواه خود، به دایرکتوری ریشه پروژه Vite + Vue 3 خود بروید. برای نصب بسته های Jest لازم دستور زیر را اجرا کنید:
با استفاده از نخ
yarn add jest jest-environment-jsdom babel-jest @babel/preset-env @vue/vue3-jest @vue/test-utils -D
با استفاده از npm
npm install --save-dev jest jest-environment-jsdom babel-jest @babel/preset-env @vue/vue3-jest @vue/test-utils
مرحله 2: پیکربندی It’s ⚙️
پس از اتمام نصب، باید Jest را با ایجاد یک فایل جدید به نام پیکربندی کنید jest.config.js در دایرکتوری اصلی پروژه شما. مطالب زیر را در فایل قرار دهید:
module.exports = {
testEnvironment: "jsdom",
transform: {
"^.+\\.vue$": "@vue/vue3-jest",
"^.+\\js$": "babel-jest",
},
testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(js|ts)$",
moduleFileExtensions: ["vue", "js"],
moduleNameMapper: {
"^@/(.*)$": "<rootDir>/src/$1",
},
coveragePathIgnorePatterns: ["/node_modules/", "/tests/"],
coverageReporters: ["text", "json-summary"],
// Fix in order for vue-test-utils to work with Jest 29
// https://test-utils.vuejs.org/migration/#test-runners-upgrade-notes
testEnvironmentOptions: {
customExportConditions: ["node", "node-addons"],
},
}
یافته های کلیدی از کد بالا،
را محیط آزمایش گزینه روی “jsdom” تنظیم شده است، که محیط تست مورد استفاده را مشخص می کند. در این مورد، از JSDOM، یک پیاده سازی جاوا اسکریپت از استانداردهای وب استفاده می کند که یک محیط مرورگر مانند را در طول آزمایش شبیه سازی می کند.
را تبدیل گزینه نحوه تبدیل انواع فایل های مختلف در طول آزمایش را مشخص می کند. به طور خاص، فایل‌هایی که به پسوند .vue ختم می‌شوند با استفاده از @vue/vue3-jest، که یک ترانسفورماتور Jest است که برای Vue 3 Single File Components (SFCs) طراحی شده است، تبدیل می‌شوند. فایل های جاوا اسکریپت (.js) با استفاده از babel-jest تبدیل می شوند.
را testRegex گزینه یک الگوی عبارت منظم را برای مطابقت با فایل های آزمایشی تنظیم می کند. فایل های واقع در / را جستجو می کندتست ها/ یا آنهایی که دارای پسوند .test.js یا .spec.js هستند. این الگو به Jest اجازه می دهد تا فایل های آزمایشی را که با این معیار مطابقت دارند، کشف و اجرا کند.
را moduleFile Extensions گزینه پسوندهای فایلی را که Jest باید به عنوان فایل های ماژول در نظر بگیرد را مشخص می کند. در این صورت شامل می شود .vue و .js پسوندها
را moduleNameMapper گزینه مشخص می کند که چگونه واردات ماژول باید حل شود. این نام مستعار @ رایج در پروژه های Vue را به دایرکتوری src نگاشت می کند. به عنوان مثال، @/example به /src/example حل خواهد شد.
را coveragePathIgnore Patterns گزینه الگوهایی از فایل ها یا دایرکتوری ها را تعریف می کند که باید هنگام محاسبه گزارش های پوشش کد نادیده گرفته شوند. در این مورد، فایل‌های موجود در فهرست‌های /node_modules/ و /tests/ را حذف می‌کند.
را پوشش خبرنگاران گزینه گزارشگرانی را که برای گزارش پوشش کد استفاده می شود را مشخص می کند. از گزارشگر متنی برای نمایش اطلاعات پوشش در کنسول و از گزارشگر json-summary برای تولید خلاصه در قالب JSON استفاده می کند.
را testEnvironmentOptions گزینه گزینه های اضافی مخصوص محیط تست را فراهم می کند. این CustomExportConditions را تنظیم می کند [“node”, “node-addons”]، که یک راه حل برای کار کردن vue-test-utils با Jest 29 است.
مرحله 3: پیکربندی Babel Js 🔧
برای پیکربندی Babel JS در پروژه خود، مراحل زیر را دنبال کنید:
module.exports = {
env: {
test: {
presets: [
[
"@babel/preset-env",
{
targets: {
node: "current",
},
},
],
],
},
},
}
هدف از این کد، صادر کردن یک شی پیکربندی است که تعیین می کند از پیش تنظیمات Babel برای اجرای آزمایش ها در محیط آزمایش استفاده شود. را env ویژگی محیط های مختلف و تنظیمات پیکربندی مربوط به آنها را تعریف می کند. در این مورد، env.test.presets ویژگی آرایه ای از پیش تنظیم های Babel را برای اعمال در محیط تست مشخص می کند.
این تنظیمات پیش‌تنظیم شامل مجموعه‌ای از پلاگین‌ها و پیکربندی‌های Babel است که برای موارد استفاده خاص در کنار هم قرار گرفته‌اند. را @babel/preset-env از پیش تنظیم برای تعیین خودکار تبدیل های Babel و polyfill های مورد نیاز بر اساس محیط هدف استفاده می شود. در این مثال محیط هدف به صورت تنظیم شده است node: "current"، که تضمین می کند کد به نسخه ای از جاوا اسکریپت سازگار با نسخه فعلی Node.js مورد استفاده برای آزمایش منتقل می شود.
مرحله 3: به روز رسانی package.json فایل 📦
برای به روز رسانی package.json فایل، مراحل زیر را دنبال کنید:
"scripts": {
...
...
"test:unit": "jest"
},
در این مورد، "test:unit" اسکریپت برای اجرای تست های واحد تعریف شده است. دستور “jest” به عنوان دستور یا بسته قابل اجرا در هنگام اجرای اسکریپت مشخص می شود. با تنظیم آن بر روی "jest"، از چارچوب تست Jest استفاده خواهد شد.
مرحله 4: نوشتن اولین تست ✍️
اکنون زمان آن است که اولین مورد آزمایشی خود را بنویسید. من معمولاً ترجیح می دهم یک فایل آزمایشی در همان کامپوننت ایجاد کنم.
HelloWorld Component code
<template>
<div>
<div>
<h1>
{{ msg }}
</h1>
<p>...</p>
</div>
</div>
</template>
<script setup>
defineProps({
msg: {
type: String,
required: true,
},
});
</script>
HelloWorld Spec Test code
import HelloWorld from "./HelloWorld.vue"
import { mount } from "@vue/test-utils"
describe("HelloWorld", () => {
it("renders properly", () => {
const wrapper = mount(HelloWorld, { props: { msg: "Hello Jest" } })
expect(wrapper.text()).toContain("Hello Jest")
})
})
مرحله 5: تست ها را اجرا کنید 🏃♂️
برای اجرای تست ها مراحل زیر را دنبال کنید:
-
رابط خط فرمان خود را باز کنید.
-
به دایرکتوری اصلی پروژه خود بروید.
-
دستور زیر را اجرا کنید:
yarn unit:test
این دستور چارچوب تست Jest را مقداردهی اولیه کرده و تست ها را اجرا می کند.
🎉 🎉 هورای و تبریک! 🥳 شما با موفقیت Jest را نصب کرده اید و تست واحد را برای پروژه Vite + Vue 3 خود راه اندازی کرده اید. 🚀 اکنون می توانید برای اطمینان از صحت و قابلیت اطمینان اجزای Vue خود، آزمایش هایی بنویسید و اجرا کنید. با پذیرش رویکرد توسعه مبتنی بر آزمایش، کیفیت کلی برنامه خود را بهبود می‌بخشید و در اوایل چرخه توسعه، باگ‌ها را تشخیص می‌دهید. 💪
به یاد داشته باشید که کیس های تست جامعی را بسازید که سناریوهای مختلف و موارد لبه را پوشش می دهد و حداکثر سود را از تلاش های تست واحد خود به دست می آورید. تست مبارک! 🎯 🧪
به هک کردن ادامه بدید!!
