تست در Vue.js

تست‌نویسی در Vue.js به شما کمک می‌کند از صحت عملکرد کامپوننت‌ها و اپلیکیشن اطمینان حاصل کنید و از بروز باگ‌های احتمالی جلوگیری کنید. در Vue می‌توان از دو نوع تست اصلی استفاده کرد:

✅ تست واحد (Unit Testing): برای تست توابع و کامپوننت‌های جداگانه
✅ تست یکپارچگی (Integration & E2E Testing): برای بررسی تعامل چندین کامپوننت یا اپلیکیشن کامل

1. راه‌اندازی محیط تست در Vue

🔹 نصب Jest (برای تست واحد)

Jest یکی از محبوب‌ترین فریمورک‌های تست در Vue.js است.
🔹 برای Vue 3، این پکیج را نصب کنید:

npm install --save-dev @vue/test-utils jest

🔹 سپس فایل jest.config.js را اضافه کنید:

module.exports = {

  testEnvironment: "jsdom",

  transform: {

    "^.+\\.vue$": "vue-jest",

    "^.+\\.js$": "babel-jest"

  }

};

2. تست واحد (Unit Testing)

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

🔹 تست یک کامپوننت ساده

مثلاً این کامپوننت Counter.vue را در نظر بگیرید:

<template>

  <div>

    <p>مقدار: {{ count }}</p>

    <button @click="increment">افزایش</button>

  </div>

</template>

<script>

export default {

  data() {

    return { count: 0 };

  },

  methods: {

    increment() {

      this.count++;

    }

  }

};

</script>

🔹 حالا یک تست واحد برای این کامپوننت می‌نویسیم:

import { mount } from "@vue/test-utils";

import Counter from "@/components/Counter.vue";

test("افزایش مقدار هنگام کلیک", async () => {

  const wrapper = mount(Counter);

  expect(wrapper.text()).toContain("مقدار: 0");

  await wrapper.find("button").trigger("click");

  expect(wrapper.text()).toContain("مقدار: 1");

});

🔹 نحوه اجرا:

npm run test

3. تست تعاملات کاربری (Integration Testing)

تست یکپارچگی بررسی می‌کند که چندین کامپوننت چگونه با یکدیگر تعامل دارند.

🔹 مثال: تست ارتباط بین کامپوننت والد و فرزند

Parent.vue کامپوننتی دارد که مقدار message را به Child.vue می‌فرستد:

<template>

  <Child :message="text" />

</template>

<script>

import Child from "./Child.vue";

export default {

  components: { Child },

  data() {

    return { text: "سلام دنیا" };

  }

};

</script>

🔹 کامپوننت Child.vue مقدار را نمایش می‌دهد:

<template>

  <p>{{ message }}</p>

</template>

<script>

export default {

  props: ["message"]

};

</script>

🔹 تست یکپارچگی:

import { mount } from "@vue/test-utils";

import Parent from "@/components/Parent.vue";

test("انتقال داده به کامپوننت فرزند", () => {

  const wrapper = mount(Parent);

  expect(wrapper.html()).toContain("سلام دنیا");

});

4. تست درخواست‌های HTTP با Mocking

در تست‌ها، نباید درخواست‌های واقعی به سرور ارسال شود. به جای آن، می‌توان از Mocking استفاده کرد.

🔹 کامپوننت User.vue که اطلاعات کاربر را از API دریافت می‌کند:

<template>

  <div>

    <p>نام کاربر: {{ user.name }}</p>

  </div>

</template>

<script>

import axios from "axios";

export default {

  data() {

    return { user: {} };

  },

  async created() {

    const response = await axios.get("https://jsonplaceholder.typicode.com/users/1");

    this.user = response.data;

  }

};

</script>

🔹 تست بدون درخواست واقعی:

import { mount } from "@vue/test-utils";

import User from "@/components/User.vue";

import axios from "axios";

import { jest } from "@jest/globals";

jest.mock("axios");

test("دریافت اطلاعات کاربر", async () => {

  axios.get.mockResolvedValue({ data: { name: "علی" } });

  const wrapper = mount(User);

  await new Promise(setImmediate);

  expect(wrapper.text()).toContain("نام کاربر: علی");

});

5. تست End-to-End با Cypress

Cypress برای تست واقعی تعاملات کاربر با مرورگر استفاده می‌شود.

🔹 نصب Cypress

npm install --save-dev cypress

سپس Cypress را اجرا کنید:

npx cypress open

🔹 در پوشه cypress/integration یک تست جدید ایجاد کنید:

describe("تست صفحه اصلی", () => {

  it("باید عنوان را نمایش دهد", () => {

    cy.visit("/");

    cy.contains("خوش آمدید به Vue");

  });

});

سپس با اجرای npm run cypress, تست در مرورگر اجرا خواهد شد.

6. اجرای خودکار تست‌ها در CI/CD

🔹 برای اجرای تست‌ها در CI/CD، می‌توان از GitHub Actions یا GitLab CI استفاده کرد.
🔹 مثال .github/workflows/test.yml برای اجرای Jest در GitHub Actions:

name: Run Tests

on: [push]

jobs:

  test:

    runs-on: ubuntu-latest

    steps:

      - uses: actions/checkout@v2

      - name: نصب Node.js

        uses: actions/setup-node@v2

        with:

          node-version: "16"

      - run: npm install

      - run: npm run test

جمع‌بندی

✔ Jest + Vue Test Utils برای تست واحد و یکپارچگی استفاده می‌شود.
✔ Mock کردن Axios از ارسال درخواست‌های واقعی جلوگیری می‌کند.
✔ Cypress برای تست End-to-End و تعاملات واقعی در مرورگر مناسب است.
✔ CI/CD می‌تواند تست‌ها را به‌صورت خودکار در هر Push اجرا کند.