Vue.js

Vue.js est un framework abordable, performant et polyvalent pour la construction d'interfaces utilisateur web. Vous pouvez tester les composants React directement dans un vrai navigateur en utilisant WebdriverIO et son fureteur.

Configuration

Pour configurer WebdriverIO dans votre projet React, suivez les instructions de notre documentation de test de composants. Assurez-vous de sélectionner solide comme préréglage dans les options de votre exécuteur, par exemple.:

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

information

Si vous utilisez déjà Vite comme serveur de développement, vous pouvez également réutiliser votre configuration dans vite. onfig.ts dans votre configuration WebdriverIO. Pour plus d'informations, voir viteConfig dans options d'exécuteur.

Le préréglage React nécessite que @vitejs/plugin-react soit installé. Nous recommandons également d'utiliser Bibliothèque de test pour afficher le composant dans la page de test. Vous devrez donc installer les dépendances supplémentaires suivantes :

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

Vous pouvez ensuite démarrer les tests en exécutant :

npx wdio run ./wdio.conf.js

Tests d'écriture

Étant donné que vous avez le composant React suivant :

./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>

In your test render the component into the DOM and run assertions on it. We recommend to either use @vue/test-utils or @testing-library/vue to attach the component to the test page. To interact with the component use WebdriverIO commands as they behave more close to actual user interactions, e.g.:

@vue/test-utils

vue.test.js

import { $, expect } from '@wdio/globals'
import { mount } from '@vue/test-utils'
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 wrapper = mount(Component, { attachTo: document.body })
        expect(wrapper.text()).toContain('Times clicked: 0')

        const button = await $('aria/increment')

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

        expect(wrapper.text()).toContain('Times clicked: 2')
        await expect($('p=Times clicked: 2')).toExist() // same assertion with WebdriverIO
    })
})

@testing-library/vue

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
    })
})

Vous pouvez trouver un exemple complet d'une suite de tests de composants WebdriverIO pour Lit dans notre référentiel exemples.

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 suspense 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

information

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({})