Jest এবং Mocha এর সাথে ইন্টিগ্রেশন

Vue.js অ্যাপ্লিকেশন তৈরি করার সময়, কোড টেস্টিং একটি গুরুত্বপূর্ণ অংশ হয়ে দাঁড়ায়। Jest এবং Mocha হল দুইটি জনপ্রিয় টেস্টিং ফ্রেমওয়ার্ক যা Vue.js অ্যাপ্লিকেশনে টেস্টিং পরিচালনা করার জন্য ব্যবহার করা হয়। এখানে, আমরা Vue.js এর সাথে Jest এবং Mocha ব্যবহার করে টেস্ট সেটআপ এবং কনফিগারেশন করার পদ্ধতি দেখাবো।

১. Jest এর সাথে Vue.js ইন্টিগ্রেশন

Jest একটি শক্তিশালী, দ্রুত এবং সহজে কনফিগারযোগ্য টেস্টিং ফ্রেমওয়ার্ক যা JavaScript অ্যাপ্লিকেশন এবং Vue.js প্রোজেক্টের জন্য অনেক জনপ্রিয়। Vue CLI ব্যবহার করলে Jest ইনস্টল এবং কনফিগার করা অনেক সহজ হয়ে যায়।

১.১. Jest ইনস্টলেশন

Vue CLI প্রোজেক্টে Jest ব্যবহার করতে, প্রথমে Jest ইনস্টল করতে হবে। সাধারণত Vue CLI প্রোজেক্টে Jest ইন্টিগ্রেশন করার জন্য @vue/cli-plugin-unit-jest প্লাগইন ব্যবহার করা হয়।

vue add unit-jest

এটি Jest ইনস্টল করবে এবং Vue প্রোজেক্টে টেস্টিং ফিচার যোগ করবে।

১.২. টেস্ট ফাইল তৈরি করা

Jest এর সাহায্যে আপনার Vue কম্পোনেন্ট বা কোড টেস্ট করতে, .spec.js বা .test.js এক্সটেনশন ব্যবহার করে টেস্ট ফাইল তৈরি করতে হয়। নিচে একটি উদাহরণ দেওয়া হলো:

// HelloWorld.spec.js
import { shallowMount } from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'Hello Jest';
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    });
    expect(wrapper.text()).toMatch(msg);
  });
});

এখানে, shallowMount ব্যবহার করা হয়েছে যা Vue কম্পোনেন্টের একটি ইনস্ট্যান্স তৈরি করে এবং সেটি টেস্টের জন্য প্রস্তুত করে।

১.৩. টেস্ট রান করা

Jest দিয়ে টেস্ট রান করতে, টার্মিনালে নিচের কমান্ডটি ব্যবহার করতে হবে:

npm run test:unit

এটি Jest এর মাধ্যমে আপনার টেস্ট চালাবে এবং ফলাফল দেখাবে।

২. Mocha এর সাথে Vue.js ইন্টিগ্রেশন

Mocha হল একটি অন্য জনপ্রিয় টেস্টিং ফ্রেমওয়ার্ক যা ইউনিট টেস্ট এবং অ্যাসিনক্রোনাস টেস্ট পরিচালনা করার জন্য ব্যবহৃত হয়। Mocha সাধারণত চূড়ান্ত কাস্টমাইজেশন এবং টেস্টিং প্লাগইন সাপোর্ট করে থাকে। Vue.js প্রোজেক্টে Mocha ব্যবহার করতে, Chai (assertion লাইব্রেরি) এবং Vue Test Utils এর সাহায্যে টেস্ট করা হয়।

২.১. Mocha ইনস্টলেশন

Vue CLI প্রোজেক্টে Mocha ইন্টিগ্রেশন করতে, প্রথমে কিছু ডিপেনডেন্সি ইনস্টল করতে হবে:

npm install --save-dev mocha chai @vue/test-utils

এর পর, আপনি Mocha এর সাথে টেস্ট রান করতে পারবেন।

২.২. টেস্ট ফাইল তৈরি করা

Mocha দিয়ে টেস্ট করতে .spec.js বা .test.js ফাইল তৈরি করতে হয়। নিচে Mocha এবং Chai দিয়ে একটি Vue কম্পোনেন্ট টেস্ট করার উদাহরণ দেওয়া হলো:

// HelloWorld.spec.js
import { shallowMount } from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';
import { expect } from 'chai';

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'Hello Mocha';
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    });
    expect(wrapper.text()).to.include(msg);
  });
});

এখানে expect ব্যবহার করা হয়েছে যা Chai লাইব্রেরি থেকে আসে এবং টেস্টের assertion তৈরি করে।

২.৩. টেস্ট রান করা

Mocha দিয়ে টেস্ট চালানোর জন্য, নিচের কমান্ডটি ব্যবহার করতে হবে:

npm run test:unit

এই কমান্ডটি Mocha দিয়ে টেস্ট চালাবে এবং টেস্ট ফলাফল দেখাবে।

৩. Vue.js এ Jest এবং Mocha এর মধ্যে পার্থক্য

• Jest:
  • Jest একটি সকল-ইন-ওয়ান টেস্টিং ফ্রেমওয়ার্ক যা Assertion, Mocking, Test Runner ইত্যাদি সব একত্রে অফার করে।
  • Jest খুবই কনফিগারেশন ফ্রিতেই কাজ করে, তাই এটি ব্যবহার করা সহজ।
  • Jest সাধারণত টেস্ট স্পিড এবং সিম্পল সেটআপ এর জন্য জনপ্রিয়।
• Mocha:
  • Mocha একটি টেস্ট ফ্রেমওয়ার্ক যা ফ্লেক্সিবিলিটি অফার করে, এবং এটি assertion এবং mocking লাইব্রেরি আলাদাভাবে ব্যবহার করতে দেয় (যেমন Chai, Sinon ইত্যাদি)।
  • Mocha কাস্টমাইজেশন এবং ফ্লেক্সিবিলিটির জন্য জনপ্রিয়, তবে সেটআপ কিছুটা জটিল হতে পারে।
  • Mocha অ্যাসিনক্রোনাস টেস্টিং এবং বড় প্রোজেক্টের জন্য বেশ উপযুক্ত।

সারাংশ

• Jest এবং Mocha উভয়ই শক্তিশালী টেস্টিং ফ্রেমওয়ার্ক যা Vue.js অ্যাপ্লিকেশনে টেস্টিংয়ের জন্য ব্যবহৃত হয়।
• Jest সাধারণত একটি সমন্বিত টেস্টিং ফ্রেমওয়ার্ক, যা Assertion, Test Runner, Mocking এবং Coverage সব একত্রে প্রদান করে।
• Mocha আরো ফ্লেক্সিবল এবং কাস্টমাইজেবল, কিন্তু সেটআপে কিছুটা বেশি কাজ থাকে। Mocha সাধারণত অ্যাসিনক্রোনাস টেস্টিং এবং বড় প্রোজেক্টের জন্য আদর্শ।
• Vue CLI উভয়ই ইন্টিগ্রেট করতে সহায়তা করে এবং টেস্টিং ব্যবস্থাকে সহজ করে তোলে।