Vue.js

Vue.js वेब यूजर इंटरफेस बनाने के लिए एक सुलभ, प्रदर्शनकारी और बहुमुखी ढांचा है। आप WebdriverIO और इसके ब्राउज़र रनरका उपयोग करके सीधे वास्तविक ब्राउज़र में Vue.js घटकों का परीक्षण कर सकते हैं।

सेटअप

अपने Vue.js प्रोजेक्ट में WebdriverIO सेटअप करने के लिए, हमारे कंपोनेंट टेस्टिंग डॉक्स में निर्देशों का पालन करें। अपने रनर विकल्पों में vue प्रीसेट के रूप में चुनना सुनिश्चित करें, उदाहरण के लिए:

// wdio.conf.js
export const config = {
    // ...
    runner: ['browser', {
        preset: 'vue'
    }],
    // ...
}

जानकारी

यदि आप पहले से ही विकास सर्वर के रूप में Vite का उपयोग कर रहे हैं तो आप अपने WebdriverIO कॉन्फ़िगरेशन के भीतर vite.config.ts में अपने कॉन्फ़िगरेशन का पुन: उपयोग भी कर सकते हैं। अधिक जानकारी के लिए, viteConfig in रनर विकल्पदेखें।

Vue प्रीसेट को स्थापित करने के लिए @vitejs/plugin-vue की आवश्यकता होती है। साथ ही हम परीक्षण पृष्ठ में घटक को प्रस्तुत करने के लिए परीक्षण लाइब्रेरी का उपयोग करने की अनुशंसा करते हैं। इसके लिए आपको निम्नलिखित अतिरिक्त निर्भरताओं को स्थापित करने की आवश्यकता होगी:

npm

npm install --save-dev @testing-library/vue @vitejs/plugin-vue

Yarn

yarn add --dev @testing-library/vue @vitejs/plugin-vue

pnpm

pnpm add --save-dev @testing-library/vue @vitejs/plugin-vue

फिर आप चलाकर परीक्षण शुरू कर सकते हैं:

npx wdio run ./wdio.conf.js

लेखन परीक्षण

यह देखते हुए कि आपके पास निम्नलिखित Vue.js घटक हैं:

./components/Component.vue

<template>
    <div>
        <p>Times clicked: {{ count }}</p>
        <button @click="increment">increment</button>
    </div>
</template>

<script>
export default {
    data: () => ({
        count: 0,
    }),

    methods: {
        increment() {
            this.count++
        },
    },
}
</script>

अपने परीक्षण में परीक्षण पृष्ठ पर घटक संलग्न करने के लिए @testing-library/vue से render विधि का उपयोग करें। घटक के साथ बातचीत करने के लिए हम WebdriverIO कमांड का उपयोग करने की अनुशंसा करते हैं क्योंकि वे वास्तविक उपयोगकर्ता इंटरैक्शन के अधिक निकट व्यवहार करते हैं, उदाहरण के लिए:

vue.test.js

import { $, expect } from '@wdio/globals'
import { render } from '@testing-library/vue'
import Component from './components/Component.vue'

describe('Vue Component Testing', () => {
    it('increments value on click', async () => {
        // The render method returns a collection of utilities to query your component.
        const { getByText } = render(Component)

        // getByText returns the first matching node for the provided text, and
        // throws an error if no elements match or if more than one match is found.
        getByText('Times clicked: 0')

        const button = await $(getByText('increment'))

        // Dispatch a native click event to our button element.
        await button.click()
        await button.click()

        getByText('Times clicked: 2') // assert with Testing Library
        await expect($('p=Times clicked: 2')).toExist() // assert with WebdriverIO
    })
})

आप हमारे उदाहरण भंडारमें Vue.js के लिए WebdriverIO घटक परीक्षण सूट का एक पूर्ण उदाहरण पा सकते हैं।

Testing Async Components in Vue3

If you are using Vue v3 and are testing async components like the following:

<script setup>
const res = await fetch(...)
const posts = await res.json()
</script>

<template>
  {{ posts }}
</template>

We recommend to use @vue/test-utils and a little suspence wrapper to get the component rendered. Unfortunately @testing-library/vue has no support for this yet. Create a helper.ts file with the following content:

import { mount, type VueWrapper as VueWrapperImport } from '@vue/test-utils'
import { Suspense } from 'vue'

export type VueWrapper = VueWrapperImport<any>
const scheduler = typeof setImmediate === 'function' ? setImmediate : setTimeout

export function flushPromises(): Promise<void> {
  return new Promise((resolve) => {
    scheduler(resolve, 0)
  })
}

export function wrapInSuspense(
  component: ReturnType<typeof defineComponent>,
  { props }: { props: object },
): ReturnType<typeof defineComponent> {
  return defineComponent({
    render() {
      return h(
        'div',
        { id: 'root' },
        h(Suspense, null, {
          default() {
            return h(component, props)
          },
          fallback: h('div', 'fallback'),
        }),
      )
    },
  })
}

export function renderAsyncComponent(vueComponent: ReturnType<typeof defineComponent>, props: object): VueWrapper{
    const component = wrapInSuspense(vueComponent, { props })
    return mount(component, { attachTo: document.body })
}

Then import and test the component as following:

import { $, expect } from '@wdio/globals'

import { renderAsyncComponent, flushPromises, type VueWrapper } from './helpers.js'
import AsyncComponent from '/components/SomeAsyncComponent.vue'

describe('Testing Async Components', () => {
    let wrapper: VueWrapper

    it('should display component correctly', async () => {
        const props = {}
        wrapper = renderAsyncComponent(AsyncComponent, { props })
        await flushPromises()
        await expect($('...')).toBePresent()
    })

    afterEach(() => {
        wrapper.unmount()
    })
})

Testing Vue Components in Nuxt

If you are using the web framework Nuxt, WebdriverIO will automatically enable the auto-import feature and makes testing your Vue components and Nuxt pages easy. However any Nuxt modules that you might define in your config and requires context to the Nuxt application can not be supported.

Reasons for that are:

• WebdriverIO can't initiate a Nuxt application soley in a browser environment
• Having component tests depend too much on the Nuxt environment creates complexity and we recommend to run these tests as e2e tests

जानकारी

WebdriverIO also provides a service for running e2e tests on Nuxt applications, see webdriverio-community/wdio-nuxt-service for information.

Mocking built-in composables

In case your component uses a native Nuxt composable, e.g. useNuxtData, WebdriverIO will automatically mock these functions and allows you to modify their behavior or assert against them, e.g.:

import { mocked } from '@wdio/browser-runner'

// e.g. your component uses calls `useNuxtData` the following way
// `const { data: posts } = useNuxtData('posts')`
// in your test you can assert against it
expect(useNuxtData).toBeCalledWith('posts')
// and change their behavior
mocked(useNuxtData).mockReturnValue({
    data: [...]
})

Handling 3rd party composables

All 3rd party modules that can supercharge your Nuxt project can't automatically get mocked. In those cases you need to manually mock them, e.g. given your application uses the Supabase module plugin:

export default defineNuxtConfig({
  modules: [
    "@nuxtjs/supabase",
    // ...
  ],
  // ...
});

and you create an instance of Supabase somewhere in your composables, e.g.:

const superbase = useSupabaseClient()

the test will fail due to:

ReferenceError: useSupabaseClient is not defined

Here, we recommend to either mock out the whole module that uses the useSupabaseClient function or create a global variable that mocks this function, e.g.:

import { fn } from '@wdio/browser-runner'
globalThis.useSupabaseClient = fn().mockReturnValue({})