Petua pembangunan Vue3+TS+Vite: cara menjalankan ujian unit yang boleh dipercayai

Rangka kerja Vue ialah rangka kerja bahagian hadapan yang sangat popular, dan Vue3, sebagai versi baharu Vue, memperkenalkan banyak ciri dan penambahbaikan baharu, menjadikannya lebih mudah dan pantas untuk pembangun membina aplikasi berkualiti tinggi. Pada masa yang sama, TypeScript dan Vite, sebagai rakan kongsi berkuasa Vue3, menyediakan pembangun pengalaman pembangunan dan struktur projek yang lebih baik.

Dalam proses pembangunan projek Vue3+TS+Vite, ujian unit adalah bahagian yang sangat penting. Melalui ujian unit, kami boleh mengesahkan ketepatan kod, menemui masalah yang berpotensi dan membetulkannya, memastikan kestabilan dan kebolehpercayaan projek. Artikel ini akan memperkenalkan anda kepada beberapa teknik ujian unit dalam pembangunan Vue3+TS+Vite untuk membantu anda menjalankan ujian unit yang boleh dipercayai.

Kenapa ujian unit?

Semasa proses pembangunan, anda mungkin menghadapi pelbagai masalah, seperti sama ada fungsi berfungsi dengan betul, sama ada komponen berfungsi secara normal, dsb. Pengujian secara manual memerlukan banyak masa dan usaha, dan juga terdedah kepada ralat. Dengan menulis ujian unit, kami boleh memastikan ketepatan kod dalam pengubahsuaian seterusnya dan memastikan kebolehselenggaraan dan kebolehskalaan projek.

Pengenalan kepada Rangka Kerja Jest

Jest ialah rangka kerja ujian JavaScript popular yang dibangunkan oleh Facebook dan digunakan untuk menulis ujian unit, ujian integrasi dan ujian UI. Ia mudah digunakan, berkuasa dan pantas, dan sangat sesuai untuk pembangunan Vue3+TS+Vite.

Pasang Jest

Mula-mula, pasang Jest dalam direktori akar projek.

npm install --save-dev jest

Kemudian, tambahkan konfigurasi berikut dalam fail package.json:

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

Tulis ujian pertama

Seterusnya, mari tulis kes ujian yang paling mudah.

Buat fail baharu bernama example.spec.ts, dan kemudian tulis kod berikut: example.spec.ts的文件，然后编写以下代码：

import { add } from './example';

test('adds 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});

在这个例子中，我们首先导入了一个名为add的函数，然后使用test函数来定义一个测试用例。在测试用例中，我们使用了expect函数来判断add(1, 2)的返回值是否等于3，并使用toBe断言来验证结果。

运行测试

现在，我们可以运行测试了。

在命令行中运行以下命令：

npm run test

如果一切正常，你将看到控制台输出以下信息：

PASS ./example.spec.ts
✓ adds 1 + 2 to equal 3 (5ms)

表示测试通过。

测试Vue组件

在Vue开发中，单元测试Vue组件是非常重要的一部分。我们可以使用Vue Test Utils库来协助我们进行Vue组件的单元测试。

首先，安装Vue Test Utils。

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

然后，我们来编写一个简单的Vue组件的测试用例。

新建一个名为HelloWorld.vue的文件，编写以下代码。

<template>
  <div>
    <h1>{{ msg }}</h1>
    <button @click="onClick">Click me</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const count = ref(0);

    const onClick = () => {
      count.value += 1;
    }

    return {
      count,
      onClick,
    }
  },
});
</script>

接下来，我们来编写一个测试用例。

新建一个名为HelloWorld.spec.ts的文件，编写以下代码。

import { mount } from '@vue/test-utils';
import HelloWorld from './HelloWorld.vue';

test('renders message and updates count when button is clicked', async () => {
  const wrapper = mount(HelloWorld, {
    props: {
      msg: 'Hello World',
    },
  });

  expect(wrapper.find('h1').text()).toEqual('Hello World');

  const button = wrapper.find('button');
  await button.trigger('click');

  expect(wrapper.find('h1').text()).toEqual('Hello World');
  expect(wrapper.vm.count).toBe(1);
});

在这个例子中，我们首先使用mount函数来将Vue组件挂载到一个虚拟DOM中，并传入props.msg作为组件的属性。然后，我们使用expectrrreee

Dalam contoh ini, kami mula-mula mengimport fail bernama fungsi add, dan kemudian gunakan fungsi test untuk menentukan kes ujian. Dalam kes ujian, kami menggunakan fungsi expect untuk menentukan sama ada nilai pulangan add(1, 2) adalah sama dengan 3 dan menggunakan toBe penegasan untuk mengesahkan keputusan. <h2></h2>Jalankan ujian<p></p>Kini, kita boleh jalankan ujian. <p></p>Jalankan arahan berikut dalam baris arahan: <p>rrreee</p>Jika semuanya baik-baik saja, anda akan melihat output mesej berikut daripada konsol: 🎜rrreee🎜Menunjukkan bahawa ujian itu lulus. 🎜🎜Menguji komponen Vue🎜🎜Dalam pembangunan Vue, unit menguji komponen Vue adalah bahagian yang sangat penting. Kami boleh menggunakan perpustakaan Uti Ujian Vue untuk membantu kami dalam menguji unit komponen Vue. 🎜🎜Mula-mula, pasang Uti Ujian Vue. 🎜rrreee🎜Kemudian, mari tulis kes ujian mudah untuk komponen Vue. 🎜🎜Buat fail baharu bernama <code>HelloWorld.vue dan tulis kod berikut. 🎜rrreee🎜Seterusnya, mari tulis kes ujian. 🎜🎜Buat fail baharu bernama HelloWorld.spec.ts dan tulis kod berikut. 🎜rrreee🎜Dalam contoh ini, kami mula-mula menggunakan fungsi mount untuk melekapkan komponen Vue ke dalam DOM maya dan memasukkan props.msg sebagai sifat komponen. Kemudian, kami menggunakan fungsi expect untuk menentukan sama ada hasil pemaparan komponen adalah seperti yang dijangkakan dan sama ada nilai pembilang meningkat selepas mengklik butang. 🎜🎜Ringkasan🎜🎜Melalui pengenalan artikel ini, kami telah mempelajari kemahiran asas menggunakan Jest untuk menjalankan ujian unit projek Vue3+TS+Vite. Kami boleh menulis kes ujian mudah untuk mengesahkan ketepatan fungsi, atau menggunakan Uti Ujian Vue untuk menguji komponen Vue. 🎜🎜Apabila membangunkan projek Vue3+TS+Vite, kita harus membangunkan tabiat menulis ujian unit untuk memastikan ketepatan kod dan kestabilan projek. Pada masa yang sama, ujian unit juga membantu meningkatkan kecekapan pembangunan dan mengurangkan masa penyahpepijatan. 🎜🎜Saya harap artikel ini akan membantu anda menjalankan ujian unit yang boleh dipercayai dalam pembangunan projek Vue3+TS+Vite! 🎜

Atas ialah kandungan terperinci Petua pembangunan Vue3+TS+Vite: cara menjalankan ujian unit yang boleh dipercayai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!