El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Proves unitàries amb Vue Test Utils

Següent ►
►

Introducció

Les proves unitàries són una part essencial del desenvolupament de programari, ja que ens permeten assegurar-nos que les nostres unitats de codi funcionen correctament de manera aïllada. En el context de Vue.js, Vue Test Utils és una biblioteca oficial que facilita la creació de proves unitàries per a components Vue.

Objectius

En aquesta secció, aprendràs a:

  • Configurar Vue Test Utils en un projecte Vue.
  • Escriure proves unitàries bàsiques per a components Vue.
  • Utilitzar mocks i espies per a proves més avançades.

Configuració de Vue Test Utils

Instal·lació

Per començar a utilitzar Vue Test Utils, primer hem d'instal·lar la biblioteca juntament amb un framework de proves com Jest o Mocha. En aquest exemple, utilitzarem Jest.

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

Configuració de Jest

Crea un fitxer de configuració per a Jest (jest.config.js) a l'arrel del teu projecte:

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/no-babel',
  testMatch: ['**/__tests__/**/*.spec.[jt]s?(x)'],
};

Afegeix un script al teu package.json per executar les proves:

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

Escriure la primera prova unitària

Component a provar

Suposem que tenim un component senzill HelloWorld.vue:

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

Creant el fitxer de prova

Crea un fitxer de prova per a HelloWorld.vue a la carpeta __tests__:

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

describe('HelloWorld.vue', () => {
  it('renderitza el missatge passat per prop', () => {
    const msg = 'Hola, Vue!';
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    });
    expect(wrapper.text()).toMatch(msg);
  });
});

Explicació del codi

  • shallowMount: Aquesta funció de Vue Test Utils crea una instància superficial del component, sense muntar els components fills.
  • propsData: Passa les propietats necessàries al component.
  • wrapper.text(): Obté el text renderitzat pel component.
  • expect(wrapper.text()).toMatch(msg): Comprova que el text renderitzat coincideixi amb el missatge passat per prop.

Utilitzant mocks i espies

Component amb una crida a una API

Suposem que tenim un component UserProfile.vue que fa una crida a una API per obtenir dades d'usuari:

<template>
  <div>
    <p>{{ user.name }}</p>
  </div>
</template>

<script>
export default {
  name: 'UserProfile',
  data() {
    return {
      user: {}
    };
  },
  async created() {
    const response = await fetch('https://api.example.com/user');
    this.user = await response.json();
  }
}
</script>

Creant el fitxer de prova amb mocks

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

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve({ name: 'John Doe' })
  })
);

describe('UserProfile.vue', () => {
  it('renderitza el nom de l\'usuari després de la crida a l\'API', async () => {
    const wrapper = shallowMount(UserProfile);
    await wrapper.vm.$nextTick();
    expect(wrapper.text()).toContain('John Doe');
  });
});

Explicació del codi

  • global.fetch: Mock de la funció fetch per simular una crida a l'API.
  • jest.fn(): Crea una funció simulada que retorna una promesa resolta amb les dades de l'usuari.
  • await wrapper.vm.$nextTick(): Espera que el cicle de vida del component es completi abans de fer les comprovacions.

Exercicis pràctics

Exercici 1: Provar un component amb una entrada de text

Crea un component TextInput.vue que tingui una entrada de text i un botó. Quan es faci clic al botó, el text de l'entrada s'ha de mostrar en un paràgraf.

<template>
  <div>
    <input v-model="text" />
    <button @click="showText">Mostrar Text</button>
    <p v-if="displayText">{{ displayText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '',
      displayText: ''
    };
  },
  methods: {
    showText() {
      this.displayText = this.text;
    }
  }
}
</script>

Escriu una prova unitària per assegurar-te que el text es mostra correctament quan es fa clic al botó.

Solució

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

describe('TextInput.vue', () => {
  it('mostra el text quan es fa clic al botó', async () => {
    const wrapper = shallowMount(TextInput);
    const input = wrapper.find('input');
    input.setValue('Hola, món!');
    await wrapper.find('button').trigger('click');
    expect(wrapper.find('p').text()).toBe('Hola, món!');
  });
});

Conclusió

En aquesta secció, hem après a configurar Vue Test Utils i Jest per a proves unitàries en un projecte Vue. Hem escrit proves unitàries bàsiques per a components Vue i hem utilitzat mocks per simular crides a APIs. Les proves unitàries són una eina poderosa per assegurar la qualitat del codi i facilitar el manteniment a llarg termini.

En la següent secció, explorarem les proves de punta a punta amb Cypress per assegurar-nos que les nostres aplicacions Vue funcionen correctament en un entorn real.

◄ Anterior
◄
Següent ►
►

Curs de Vue.js

Mòdul 1: Introducció a Vue.js

Mòdul 2: Conceptes bàsics de Vue.js

Mòdul 3: Components de Vue.js

Mòdul 4: Vue Router

Mòdul 5: Gestió d'estat amb Vuex

Mòdul 6: Directives de Vue.js

Mòdul 7: Plugins de Vue.js

Mòdul 8: Proves en Vue.js

Mòdul 9: Conceptes avançats de Vue.js

Mòdul 10: Construcció i desplegament d'aplicacions Vue.js

Mòdul 11: Projectes de Vue.js del món real

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats