Rumah > hujung hadapan web > View.js > teks badan

Cara menggunakan Vue untuk ujian unit dan ujian hujung ke hujung

WBOY
Lepaskan: 2023-08-04 11:15:20
asal
970 orang telah melayarinya

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
Salin selepas log masuk
  1. 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)
  })
})
Salin selepas log masuk
  1. Jalankan ujian unit
    Lakukan arahan berikut dalam baris arahan untuk menjalankan ujian unit:
npm run test:unit
Salin selepas log masuk
  1. 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
Salin selepas log masuk
  1. 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()
  }
}
Salin selepas log masuk
  1. 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'
      }
    }
  }
}
Salin selepas log masuk
  1. Jalankan ujian hujung ke hujung
    Laksanakan arahan berikut dalam baris arahan untuk menjalankan ujian hujung ke hujung:
npm run test:e2e
Salin selepas log masuk
  1. 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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan