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

Simulació de dependències

Següent ►
►

En aquest tema, aprendrem com simular dependències en les proves de les nostres aplicacions Vue.js. La simulació de dependències és una tècnica crucial per a les proves unitàries, ja que ens permet aïllar el codi que estem provant i assegurar-nos que les proves són fiables i repetibles.

Objectius del tema

  • Entendre què és la simulació de dependències i per què és important.
  • Aprendre a utilitzar jest.mock per simular mòduls.
  • Veure exemples pràctics de simulació de dependències en components Vue.
  • Realitzar exercicis pràctics per reforçar els conceptes apresos.

Què és la simulació de dependències?

La simulació de dependències (mocking) és el procés de substituir parts del sistema que estem provant amb versions controlades que imiten el comportament de les dependències reals. Això ens permet:

  • Aïllar el codi que estem provant.
  • Controlar l'entorn de prova.
  • Evitar efectes secundaris no desitjats.
  • Millorar la velocitat de les proves.

Utilitzant jest.mock per simular mòduls

Jest és un dels marcs de proves més populars per a aplicacions JavaScript, i proporciona una funcionalitat integrada per simular mòduls. Vegem com podem utilitzar jest.mock per simular un mòdul.

Exemple pràctic

Suposem que tenim un mòdul api.js que fa una crida a una API externa:

// api.js
export const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  return response.json();
};

I tenim un component Vue que utilitza aquest mòdul:

// MyComponent.vue
<template>
  <div>
    <p v-if="data">{{ data }}</p>
    <p v-else>Loading...</p>
  </div>
</template>

<script>
import { fetchData } from './api';

export default {
  data() {
    return {
      data: null,
    };
  },
  async created() {
    this.data = await fetchData();
  },
};
</script>

Per provar aquest component, volem simular la funció fetchData per evitar fer una crida real a l'API. Aquí teniu com ho podem fer:

// MyComponent.test.js
import { shallowMount } from '@vue/test-utils';
import MyComponent from './MyComponent';
import { fetchData } from './api';

// Simulem el mòdul api.js
jest.mock('./api', () => ({
  fetchData: jest.fn(),
}));

describe('MyComponent', () => {
  it('mostra les dades després de carregar', async () => {
    // Definim el comportament de la funció simulada
    fetchData.mockResolvedValue({ message: 'Hello, world!' });

    const wrapper = shallowMount(MyComponent);

    // Esperem que el component es carregui
    await wrapper.vm.$nextTick();

    // Comprovem que les dades es mostren correctament
    expect(wrapper.text()).toContain('Hello, world!');
  });
});

Explicació del codi

  1. Simulació del mòdul: Utilitzem jest.mock per simular el mòdul api.js. Això ens permet definir el comportament de la funció fetchData dins de les nostres proves.
  2. Definició del comportament de la funció simulada: Utilitzem fetchData.mockResolvedValue per especificar que la funció simulada ha de retornar { message: 'Hello, world!' } quan es cridi.
  3. Prova del component: Muntem el component amb shallowMount i esperem que es carregui amb await wrapper.vm.$nextTick(). Finalment, comprovem que el text del component conté Hello, world!.

Exercicis pràctics

Exercici 1: Simulació d'una funció de mòdul

  1. Crea un mòdul userService.js amb una funció getUser que retorni un objecte d'usuari.
  2. Crea un component Vue que utilitzi aquesta funció per mostrar el nom de l'usuari.
  3. Escriu una prova per al component, simulant la funció getUser per retornar un nom d'usuari fictici.

Solució de l'exercici 1

// userService.js
export const getUser = async () => {
  return { name: 'John Doe' };
};

// UserComponent.vue
<template>
  <div>
    <p v-if="user">{{ user.name }}</p>
    <p v-else>Loading...</p>
  </div>
</template>

<script>
import { getUser } from './userService';

export default {
  data() {
    return {
      user: null,
    };
  },
  async created() {
    this.user = await getUser();
  },
};
</script>

// UserComponent.test.js
import { shallowMount } from '@vue/test-utils';
import UserComponent from './UserComponent';
import { getUser } from './userService';

jest.mock('./userService', () => ({
  getUser: jest.fn(),
}));

describe('UserComponent', () => {
  it('mostra el nom de l\'usuari després de carregar', async () => {
    getUser.mockResolvedValue({ name: 'Jane Doe' });

    const wrapper = shallowMount(UserComponent);

    await wrapper.vm.$nextTick();

    expect(wrapper.text()).toContain('Jane Doe');
  });
});

Resum

En aquest tema, hem après què és la simulació de dependències i per què és important en les proves unitàries. Hem vist com utilitzar jest.mock per simular mòduls i hem treballat amb exemples pràctics per entendre millor el procés. Finalment, hem realitzat un exercici pràctic per reforçar els conceptes apresos.

En el proper tema, explorarem com realitzar proves de punta a punta amb Cypress, una eina poderosa per assegurar-nos que les nostres aplicacions 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