Comment utiliser Vue pour les tests unitaires et les tests de bout en bout

Comment utiliser Vue pour les tests unitaires et les tests de bout en bout

Introduction : Pendant le processus de développement, afin de garantir la qualité et la stabilité du code, nous devons généralement effectuer des tests unitaires et des tests de bout en bout . Cet article expliquera comment utiliser Vue pour les tests unitaires et les tests de bout en bout, et donnera des exemples de code correspondants.

1. Tests unitaires
Les tests unitaires font référence au test et à la vérification de la plus petite unité testable dans le logiciel. Pour les applications Vue, les tests unitaires peuvent être effectués sur les composants. Dans Vue, les tests unitaires peuvent être effectués à l'aide des outils Karma et Jest.

1. Installez Karma et Jest
   Exécutez la commande suivante dans la ligne de commande pour installer Karma et Jest :

npm install karma --save-dev
npm install jest --save-dev

2. Créez des cas de test
   Créez un dossier de tests dans le répertoire où se trouve le composant Vue pour stocker les cas de test. Créez un fichier se terminant par .spec.js dans le dossier tests pour écrire des cas de test.

Par exemple, nous créons un scénario de test pour le composant HelloWorld. Créez le fichier HelloWorld.spec.js dans le dossier tests et écrivez le code suivant :

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

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'Hello World'
    const wrapper = mount(HelloWorld, {
      propsData: { msg }
    })
    expect(wrapper.text()).toBe(msg)
  })
})

3. Exécutez le test unitaire
   Exécutez la commande suivante dans la ligne de commande pour exécuter le test unitaire :

npm run test:unit

4. Résultats du test unitaire
   Une fois l'exécution terminée, vous verrez les résultats des tests unitaires dans la fenêtre de ligne de commande. Sur la base des assertions du scénario de test, vous pouvez déterminer s'il réussit ou non.

2. Tests de bout en bout
Les tests de bout en bout font référence au test de l'ensemble de l'application, y compris l'interface utilisateur et l'interaction en arrière-plan. Dans Vue, vous pouvez utiliser Nightwatch.js pour des tests de bout en bout.

1. Installer Nightwatch.js
   Exécutez la commande suivante dans la ligne de commande pour installer Nightwatch.js :

npm install nightwatch --save-dev

2. Créer des cas de test
   Créez un dossier de tests dans le répertoire racine du projet pour stocker les cas de test de bout en bout. Créez un dossier e2e sous le dossier tests pour stocker les fichiers de scénario de test de bout en bout.

Par exemple, nous créons un scénario de test pour la page d'accueil. Créez le fichier home.spec.js dans le dossier e2e et écrivez le code suivant :

module.exports = {
  'Home Page Test': function (browser) {
    browser
      .url('http://localhost:8080/#/home')
      .waitForElementVisible('body')
      .assert.containsText('h1', 'Welcome to Home Page')
      .end()
  }
}

3. Configure Nightwatch.js
   Créez un fichier nightwatch.config.js dans le répertoire racine du projet et configurez les paramètres pertinents de Nightwatch.js.

module.exports = {
  src_folders: ['tests/e2e'],
  webdriver: {
    start_process: true,
    server_path: require('chromedriver').path,
    port: 9515
  },
  test_settings: {
    default: {
      desiredCapabilities: {
        browserName: 'chrome'
      }
    }
  }
}

4. Exécutez le test de bout en bout
   Exécutez la commande suivante dans la ligne de commande pour exécuter le test de bout en bout :

npm run test:e2e

5. Résultats du test de bout en bout
   Une fois l'exécution terminée , vous verrez le test de bout en bout dans la fenêtre de ligne de commande Les résultats des tests de bout en bout. Sur la base des assertions du scénario de test, vous pouvez déterminer s'il réussit ou non.

Résumé :
Cet article explique comment utiliser Vue pour les tests unitaires et les tests de bout en bout, et donne des exemples de code correspondants. Grâce aux tests unitaires et aux tests de bout en bout, la qualité et la stabilité du code peuvent être garanties et la fiabilité de l'application peut être améliorée. Dans le développement réel, il est recommandé d'intégrer les tests unitaires et les tests de bout en bout dans le processus d'intégration continue pour garantir la robustesse et la maintenabilité du code.

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!