Bagaimana bikin unit test di Vuejs ?

Dibuat pada 7 April 2023 | Diperbarui pada 7 April 2023

Apa itu unit testing ✅

Unit testing adalah suatu metode untuk pengujian komponen software, untuk meminimalisir adanya bug sebelum production. Unit testing termasuk dalam tahapan software development. fungsi dari unit testing adalah memastikan bahwa seluruh kode berjalan sesuai yang diinginkan. Nah disini saya ingin menjelaskan unit testing di vuejs.

berikut contoh implementasinya:

katakanlah kita mempunyai berkas untuk mengecek komponen.

Hello.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
</template>

export default {
  name: 'Hello',
  props: {
    msg: String,
  },
};
hello.spec.js
import { shallowMount } from '@vue/test-utils';
import Hello from '@/components/Hello.vue';

describe('Hello.vue', () => {
  it('renders props.msg ketika dilempar', () => {
    const msg = 'new message';
    const wrapper = shallowMount(Hello, {
      propsData: { msg },
    });
    expect(wrapper.text()).toMatch(msg);
  });
});

Dari kode diatas kita menggunakan API shallowMount untuk mendefinisikan komponen yang dibutuhkan. lalu kita menambahkan opsi propsData untuk mengoper props.

Sekian penjelasan dari saya, lebih jelasnya lagi bisa pelajari di unit testing vue component