Cara menggunakan Vue untuk ujian unit dan ujian hujung ke hujung

Cara menggunakan Vue untuk ujian unit dan ujian hujung ke hujung

Pengenalan: Semasa proses pembangunan, untuk memastikan kualiti dan kestabilan kod, kami secara amnya perlu melakukan ujian unit dan ujian hujung ke hujung . Artikel ini akan memperkenalkan cara menggunakan Vue untuk ujian unit dan ujian hujung ke hujung serta memberikan contoh kod yang sepadan.

1. Ujian Unit
Ujian unit merujuk kepada ujian dan pengesahan unit terkecil yang boleh diuji dalam perisian Untuk aplikasi Vue, ujian unit boleh dilakukan pada komponen. Dalam Vue, ujian unit boleh dilakukan menggunakan alat Karma dan Jest.

1. Pasang Karma dan Jest
   Jalankan arahan berikut dalam baris arahan untuk memasang Karma dan Jest:

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

2. Buat kes ujian
   Buat folder ujian dalam direktori tempat komponen Vue terletak untuk menyimpan kes ujian. Buat fail yang berakhir dengan .spec.js dalam folder ujian untuk menulis kes ujian.

Sebagai contoh, kami mencipta kes ujian untuk komponen HelloWorld. Cipta fail HelloWorld.spec.js di bawah folder ujian dan tulis kod berikut:

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. Jalankan ujian unit
   Lakukan arahan berikut dalam baris arahan untuk menjalankan ujian unit:

npm run test:unit

4. Hasil ujian unit
   Selepas pelaksanaan selesai, Anda akan melihat keputusan ujian unit dalam tetingkap baris arahan. Berdasarkan pernyataan dalam kes ujian, anda boleh menentukan sama ada ia lulus atau tidak.

2. Ujian hujung ke hujung
Ujian hujung ke hujung merujuk kepada menguji keseluruhan aplikasi, termasuk antara muka pengguna dan interaksi latar belakang. Dalam Vue, anda boleh menggunakan Nightwatch.js untuk ujian hujung ke hujung.

1. Pasang Nightwatch.js
   Jalankan arahan berikut dalam baris arahan untuk memasang Nightwatch.js:

npm install nightwatch --save-dev

2. Buat kes ujian
   Buat folder ujian dalam direktori akar projek untuk menyimpan kes ujian hujung ke hujung. Cipta folder e2e di bawah folder ujian untuk menyimpan fail kes ujian hujung ke hujung.

Sebagai contoh, kami mencipta kes ujian untuk halaman utama. Cipta fail home.spec.js dalam folder e2e dan tulis kod berikut:

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

3. Konfigurasikan Nightwatch.js
   Buat fail nightwatch.config.js dalam direktori akar projek dan konfigurasikan parameter Nightwatch.js yang berkaitan.

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

4. Jalankan ujian hujung ke hujung
   Laksanakan arahan berikut dalam baris arahan untuk menjalankan ujian hujung ke hujung:

npm run test:e2e

5. Keputusan ujian hujung ke hujung
   Selepas pelaksanaan selesai , anda akan melihat ujian hujung ke hujung dalam tetingkap baris arahan Keputusan ujian hujung ke hujung. Berdasarkan pernyataan dalam kes ujian, anda boleh menentukan sama ada ia lulus atau tidak.

Ringkasan:
Artikel ini memperkenalkan cara menggunakan Vue untuk ujian unit dan ujian hujung ke hujung, serta memberikan contoh kod yang sepadan. Melalui ujian unit dan ujian hujung ke hujung, kualiti dan kestabilan kod dapat dijamin dan kebolehpercayaan aplikasi dapat dipertingkatkan. Dalam pembangunan sebenar, adalah disyorkan untuk menyepadukan ujian unit dan ujian hujung ke hujung ke dalam proses penyepaduan berterusan untuk memastikan keteguhan dan kebolehselenggaraan kod.

Atas ialah kandungan terperinci Cara menggunakan Vue untuk ujian unit dan ujian hujung ke hujung. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!