Conseils de développement Vue3+TS+Vite : comment effectuer des tests unitaires fiables

Le framework Vue est un framework front-end très populaire, et Vue3, en tant que nouvelle version de Vue, introduit de nombreuses nouvelles fonctionnalités et améliorations, permettant aux développeurs de créer plus facilement et plus rapidement des applications de haute qualité. Dans le même temps, TypeScript et Vite, en tant que partenaires puissants de Vue3, offrent aux développeurs une meilleure expérience de développement et une meilleure structure de projet.

Dans le processus de développement du projet Vue3+TS+Vite, les tests unitaires sont une partie très importante. Grâce aux tests unitaires, nous pouvons vérifier l'exactitude du code, découvrir les problèmes potentiels et les résoudre, garantissant ainsi la stabilité et la fiabilité du projet. Cet article vous présentera quelques techniques de tests unitaires dans le développement Vue3+TS+Vite pour vous aider à effectuer des tests unitaires fiables.

Pourquoi les tests unitaires ?

Pendant le processus de développement, vous pouvez rencontrer divers problèmes, tels que le fonctionnement correct des fonctions, le rendu normal des composants, etc. Les tests manuels demandent beaucoup de temps et d’efforts et sont également sujets aux erreurs. En écrivant des tests unitaires, nous pouvons garantir l'exactitude du code dans les modifications ultérieures et assurer la maintenabilité et l'évolutivité du projet.

Introduction au framework Jest

Jest est un framework de test JavaScript populaire développé par Facebook et utilisé pour écrire des tests unitaires, des tests d'intégration et des tests d'interface utilisateur. Il est facile à utiliser, puissant et rapide, et convient parfaitement au développement Vue3+TS+Vite.

Installez Jest

Tout d'abord, installez Jest dans le répertoire racine du projet.

npm install --save-dev jest

Ensuite, ajoutez la configuration suivante dans le fichier package.json :

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

Écrivez le premier test

Ensuite, écrivons le cas de test le plus simple.

Créez un nouveau fichier nommé example.spec.ts, puis écrivez le code suivant : 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

Dans cet exemple, nous avons d'abord importé un fichier nommé add function, puis utilisez la fonction test pour définir un scénario de test. Dans le cas de test, nous utilisons la fonction expect pour déterminer si la valeur de retour de add(1, 2) est égale à 3, et utilisons le toBe pour vérifier les résultats. <h2></h2>Exécutez le test<p></p>Maintenant, nous pouvons exécuter le test. <p></p>Exécutez la commande suivante dans la ligne de commande : <p>rrreee</p>Si tout se passe bien, vous verrez le message suivant sortir de la console : 🎜rrreee🎜Indique que le test a réussi. 🎜🎜Test des composants Vue🎜🎜Dans le développement de Vue, les tests unitaires des composants Vue sont une partie très importante. Nous pouvons utiliser la bibliothèque Vue Test Utils pour nous aider dans les tests unitaires des composants Vue. 🎜🎜Tout d’abord, installez Vue Test Utils. 🎜rrreee🎜Ensuite, écrivons un cas de test simple pour le composant Vue. 🎜🎜Créez un nouveau fichier nommé <code>HelloWorld.vue et écrivez le code suivant. 🎜rrreee🎜Ensuite, écrivons un cas de test. 🎜🎜Créez un nouveau fichier nommé HelloWorld.spec.ts et écrivez le code suivant. 🎜rrreee🎜Dans cet exemple, nous utilisons d'abord la fonction mount pour monter le composant Vue dans un DOM virtuel, et transmettons props.msg comme propriété du composant. Ensuite, nous utilisons la fonction expect pour déterminer si le résultat du rendu du composant est comme prévu et si la valeur du compteur augmente après avoir cliqué sur le bouton. 🎜🎜Résumé🎜🎜Grâce à l'introduction de cet article, nous avons acquis les compétences de base de l'utilisation de Jest pour effectuer des tests unitaires de projets Vue3+TS+Vite. Nous pouvons écrire des cas de test simples pour vérifier l'exactitude de la fonction, ou utiliser Vue Test Utils pour tester les composants Vue. 🎜🎜Lors du développement d'un projet Vue3+TS+Vite, nous devons développer l'habitude d'écrire des tests unitaires pour garantir l'exactitude du code et la stabilité du projet. Dans le même temps, les tests unitaires contribuent également à améliorer l’efficacité du développement et à réduire le temps de débogage. 🎜🎜J'espère que cet article vous aidera à effectuer des tests unitaires fiables dans le développement de projets Vue3+TS+Vite ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!