تست کد جاوا اسکریپت – انجمن DEV

Summarize this content to 400 words in Persian Lang
تست بخش مهمی از توسعه نرم‌افزار است و اطمینان حاصل می‌کند که کد مطابق انتظار عمل می‌کند و عاری از نقص است. در توسعه جاوا اسکریپت، طیف گسترده‌ای از ابزارها و چارچوب‌های تست در دسترس هستند که هر کدام برای رسیدگی به جنبه‌های مختلف تست طراحی شده‌اند. این مقاله رویکردهای مختلف برای آزمایش کد جاوا اسکریپت، از جمله تست واحد، تست یکپارچه سازی، و تست انتها به انتها، همراه با نمونه هایی از چارچوب های محبوب و بهترین شیوه ها را بررسی می کند.

چرا تست مهم است

تست کد جاوا اسکریپت چندین مزیت دارد، مانند:

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

انواع تست

تست واحد: تست واحد بر روی آزمایش عملکردها یا اجزای جداگانه به صورت مجزا تمرکز دارد. هدف این است که اطمینان حاصل شود که هر بخش از کد به تنهایی کار می کند.
تست یکپارچه سازی: تعامل بین ماژول ها یا اجزای مختلف را آزمایش می کند تا اطمینان حاصل شود که آنها همانطور که انتظار می رود با هم کار می کنند.
تست End-to-End (E2E): سناریوهای واقعی کاربر را شبیه سازی می کند و کل جریان برنامه را از ابتدا تا انتها آزمایش می کند و تأیید می کند که برنامه از دیدگاه کاربر به درستی رفتار می کند.
تست عملکردی: عملکرد خاص برنامه را آزمایش می کند تا اطمینان حاصل شود که مشخصات مورد نیاز را برآورده می کند
تست رگرسیون: اطمینان حاصل می کند که تغییرات کد جدید عملکرد موجود را خراب نمی کند

چارچوب های تست محبوب جاوا اسکریپت

Jest: یک چارچوب آزمایشی جامع که توسط فیس بوک توسعه یافته است، که برای کار با هر برنامه جاوا اسکریپت طراحی شده است. به دلیل سهولت استفاده و ویژگی‌های قدرتمند، برای برنامه‌های React محبوبیت خاصی دارد.
Mocha: یک چارچوب تست انعطاف پذیر که به شما امکان می دهد تست ها را در Node.js و مرورگر اجرا کنید. این یک پایه محکم برای نوشتن تست ها فراهم می کند اما به کتابخانه های اضافی برای ادعاها و تمسخر نیاز دارد.
Jasmine: یک چارچوب توسعه مبتنی بر رفتار برای آزمایش کد جاوا اسکریپت، با یک نحو تمیز و کتابخانه ادعای داخلی
Cypress: یک چارچوب تست سرتاسر که در مرورگر اجرا می شود و یک تجربه آزمایشی تعاملی را ارائه می دهد.
Puppeteer: یک کتابخانه Node که یک API سطح بالا برای کنترل Chrome یا Chromiu بدون هد ارائه می دهد.

m، برای اتوماسیون مرورگر و تست E2E مفید است

راه اندازی یک محیط تست

استفاده از Jest برای تست واحد

نصب و راه اندازی:

برای شروع کار با Jest، باید Node.js را نصب کنید. سپس، می توانید Jest را با استفاده از NPM نصب کنید:

npm install –save-dev jest

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پیکربندی:

یک اسکریپت به خود اضافه کنید package.jsonبرای اجرا این است:

{
“scripts”: {
“test”: “jest”
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تست های واحد نوشتاری:

فرض کنید یک تابع ساده دارید sumکه دو عدد اضافه می کند:

// sum.js
function sum(a, b) {
return a + b;
}

module.exports = sum;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

یک فایل آزمایشی ایجاد کنید sum.test.js برای نوشتن تست های واحد برای sum تابع:

// sum.test.js
const sum = require(‘./sum’);

test(‘adds 1 + 2 to equal 3’, () => {
expect(sum(1, 2)).toBe(3);
});

test(‘adds -1 + -1 to equal -2’, () => {
expect(sum(-1, -1)).toBe(-2);
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تست های در حال اجرا:

با استفاده از دستور زیر تست ها را اجرا کنید:

npm test

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Jest به طور خودکار فایل‌ها را پیدا کرده و با آن اجرا می‌کند .test.jsیا .spec.js suffix.

استفاده از موکا و چای برای آزمایش

نصب و راه اندازی:

ابتدا موکا و چای را نصب کنید:

npm install –save-dev mocha chai

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تست های نوشتاری:

فرض کنید شما هم همین را دارید sum تابع. یک فایل آزمایشی ایجاد کنید sum.test.js:

// sum.js
function sum(a, b) {
return a + b;
}

module.exports = sum;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

// sum.test.js
const chai = require(‘chai’);
const expect = chai.expect;
const sum = require(‘./sum’);

describe(‘sum’, function() {
it(‘should return 3 when adding 1 and 2’, function() {
expect(sum(1, 2)).to.equal(3);
});

it(‘should return -2 when adding -1 and -1’, function() {
expect(sum(-1, -1)).to.equal(-2);
});
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تست های در حال اجرا:

برای اجرای Mocha یک اسکریپت به package.json خود اضافه کنید:

{
“scripts”: {
“test”: “mocha”
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با استفاده از دستور زیر تست ها را اجرا کنید:

npm test

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تست انتها به انتها با سرو

Cypress یک چارچوب تست محبوب E2E است که یک محیط آزمایشی غنی و تعاملی را فراهم می کند.

نصب و راه اندازی:

Cypress را با استفاده از NPM نصب کنید:

npm install –save-dev cypress

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پیکربندی:

Cypress را با استفاده از دستور باز کنید:

npx cypress open

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این دستور یک را ایجاد می کند cypress دایرکتوری با نمونه تست ها و Cypress Test Runner را باز کنید.

تست های نوشتاری:

فرض کنید یک برنامه وب با فرم ورود دارید. یک فایل آزمایشی ایجاد کنید login.spec.js:

// login.spec.js
describe(‘Login Page’, () => {

## it(‘should display the login form’, () => {

cy.visit(‘/login’);
cy.get(‘form’).should(‘be.visible’);

});

it(‘should allow users to log in’, () => {
cy.visit(‘/login’);
cy.get(‘input[name=”username”]’).type(‘user’);
cy.get(‘input[name=”password”]’).

## type
(‘password’);
cy.get(‘button[type=”submit”]’).click();
cy.url().should(‘include’, ‘/dashboard’);
});
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تست های در حال اجرا:

برای اجرای تست ها از Cypress Test Runner استفاده کنید:

npx cypress open

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بهترین روش ها برای تست جاوا اسکریپت

موارد تست واضح و تشریحی را بنویسید: از نام ها و توضیحات معنی دار برای موارد تست استفاده کنید تا درک هدف هر آزمون آسان شود.
تست ها را مستقل نگه دارید: اطمینان حاصل کنید که تست ها به یکدیگر وابسته نیستند و می توانند به هر ترتیبی اجرا شوند.
از Mocks و Stubs استفاده کنید: برای جداسازی واحدها و اجتناب از وابستگی های خارجی، مانند درخواست های شبکه یا دسترسی به پایگاه داده، در طول آزمایش، از mocks و stub استفاده کنید.
آزمایش‌ها را به طور مکرر اجرا کنید: آزمایش‌ها را در گردش کار توسعه ادغام کنید و آنها را به طور مکرر اجرا کنید تا مشکلات را زودتر تشخیص دهید.
پوشش تست بالا را حفظ کنید: پوشش تست بالا را هدف قرار دهید تا مطمئن شوید که اکثر قسمت‌های پایگاه کد تست شده‌اند. با این حال، روی آزمایش مسیرهای بحرانی و موارد لبه تمرکز کنید.
تست خودکار: از ابزارهای Continuous Integration (CI) برای خودکار کردن تست های در حال اجرا در هر تغییر کد استفاده کنید.

نتیجه

تست بخشی ضروری از توسعه جاوا اسکریپت است که از کیفیت، قابلیت اطمینان و نگهداری کد اطمینان حاصل می کند. با استفاده از چارچوب‌های تست محبوب مانند Jest، Mocha و Cypress، توسعه‌دهندگان می‌توانند آزمایش‌های جامعی را بنویسند و اجرا کنند که جنبه‌های مختلف برنامه‌های کاربردی آنها را پوشش می‌دهد. پیروی از بهترین شیوه ها و حفظ یک استراتژی تست قوی می تواند به طور قابل توجهی کیفیت کلی نرم افزار را افزایش دهد و اطمینان را در تغییرات و استقرار کد ایجاد کند.

npm install --save-dev jest

{
  "scripts": {
    "test": "jest"
  }
}

// sum.js
function sum(a, b) {
  return a + b;
}

module.exports = sum;

// sum.test.js
const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

test('adds -1 + -1 to equal -2', () => {
  expect(sum(-1, -1)).toBe(-2);
});

npm test

npm install --save-dev mocha chai

// sum.js
function sum(a, b) {
  return a + b;
}

module.exports = sum;

// sum.test.js
const chai = require('chai');
const expect = chai.expect;
const sum = require('./sum');

describe('sum', function() {
  it('should return 3 when adding 1 and 2', function() {
    expect(sum(1, 2)).to.equal(3);
  });

  it('should return -2 when adding -1 and -1', function() {
    expect(sum(-1, -1)).to.equal(-2);
  });
});

{
  "scripts": {
    "test": "mocha"
  }
}

npm test

npm install --save-dev cypress

npx cypress open

// login.spec.js
describe('Login Page', () => {

##   it('should display the login form', () => {

    cy.visit('/login');
    cy.get('form').should('be.visible');

  });

  it('should allow users to log in', () => {
    cy.visit('/login');
    cy.get('input[name="username"]').type('user');
    cy.get('input[name="password"]').

## type
('password');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});

npx cypress open