Rumah hujung hadapan web tutorial js Panduan ujian unit bertindak balas: Cara memastikan kualiti kod bahagian hadapan

Panduan ujian unit bertindak balas: Cara memastikan kualiti kod bahagian hadapan

Sep 26, 2023 pm 01:45 PM
react Ujian unit Kualiti kod bahagian hadapan

Panduan ujian unit bertindak balas: Cara memastikan kualiti kod bahagian hadapan

Panduan Pengujian Unit React: Cara Memastikan Kualiti Kod Bahagian Hadapan

Pengenalan:
Dengan perkembangan dan kerumitan bahagian hadapan -pembangunan akhir Dengan peningkatan, memastikan kualiti kod bahagian hadapan menjadi sangat penting. Sebagai perpustakaan JavaScript yang popular, React juga memerlukan ujian unit yang berkesan untuk memastikan kebolehpercayaan dan kestabilan kod. Artikel ini akan memperkenalkan anda kepada beberapa konsep dan amalan asas ujian unit React, serta contoh kod khusus.

1. Konsep asas ujian unit React

  1. Definisi ujian unit: Ujian unit merujuk kepada pembangunan yang mengesahkan unit terkecil yang boleh diuji bagi Aktiviti perisian. Dalam pembangunan bahagian hadapan, komponen React dianggap sebagai satu unit, dan kami boleh menguji unit kefungsian, logik dan interaksi komponen.
  2. Pilihan rangka kerja ujian: Terdapat banyak rangka kerja ujian yang sangat baik untuk dipilih dalam ekosistem React, seperti Jest, Enzyme dan React Testing Library. Dalam artikel ini, kami akan menerangkan Jest dan Enzim sebagai contoh.

2. Pasang dan konfigurasikan persekitaran ujian

  1. Arahan untuk memasang Jest dan Enzim adalah seperti berikut: #🎜🎜 #

    npm install jest enzyme enzyme-adapter-react-16 --save-dev
    Salin selepas log masuk
    #🎜 🎜#

  2. Buat fail jest.config.js dalam direktori akar projek dan konfigurasikan kandungan berikut:
  3. module.exports = {
      verbose: true,
      setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
    };
    Salin selepas log masuk

    #🎜🎜 Di bawah folder src Cipta fail setupTests.js dan konfigurasikan kandungan berikut:
  4. import Enzyme from 'enzyme';
    import Adapter from 'enzyme-adapter-react-16';
    
    Enzyme.configure({ adapter: new Adapter() });
    Salin selepas log masuk
  5. 3. Latihan ujian unit bertindak balas
  6. Ambil komponen pembilang mudah sebagai contoh untuk memperkenalkan cara Menjalankan ujian unit React.


Contoh kod komponen pembilang:
    import React, { useState } from 'react';
    
    const Counter = () => {
      const [count, setCount] = useState(0);
    
      const increment = () => {
     setCount(count + 1);
      };
    
      const decrement = () => {
     if (count > 0) {
       setCount(count - 1);
     }
      };
    
      return (
     <div>
       <button onClick={decrement}>-</button>
       <span>{count}</span>
       <button onClick={increment}>+</button>
     </div>
      );
    };
    
    export default Counter;
    Salin selepas log masuk
  1. Tulis kes ujian untuk komponen Counter dan buat Counter test.js, dan tambah kandungan berikut:
  2. import React from 'react';
    import { mount } from 'enzyme';
    import Counter from './Counter';
    
    describe('Counter组件', () => {
      it('初始count值为0', () => {
     const wrapper = mount(<Counter />);
     expect(wrapper.find('span').text()).toEqual('0');
      });
    
      it('点击+按钮时count自增', () => {
     const wrapper = mount(<Counter />);
     wrapper.find('button').at(2).simulate('click');
     expect(wrapper.find('span').text()).toEqual('1');
      });
    
      it('点击-按钮时count自减', () => {
     const wrapper = mount(<Counter />);
     wrapper.find('button').at(0).simulate('click');
     expect(wrapper.find('span').text()).toEqual('0');
     wrapper.find('button').at(0).simulate('click');
     expect(wrapper.find('span').text()).toEqual('0');
      });
    });
    Salin selepas log masuk
  3. Kes ujian di atas menguji komponen Counter, termasuk nilai awal ialah 0, kiraan bertambah apabila butang + diklik dan kiraan berkurangan apabila butang - diklik. Dengan menggunakan kaedah pelekap, kita boleh mensimulasikan kitaran hayat komponen untuk ujian interaktif.

    4 Jalankan ujian unit dan laporan liputan ujian

Tambahkan perkara berikut dalam fail package.json Arahan:
    "scripts": {
      "test": "jest --coverage"
    }
    Salin selepas log masuk

  1. Jalankan arahan

    untuk melaksanakan semua ujian unit dan menjana laporan liputan ujian. Anda boleh melihat laporan yang sepadan di bawah folder liputan.
  2. npm testKesimpulan:
  3. Melalui pengenalan artikel ini, anda telah memahami konsep dan amalan asas ujian unit React, dan cara menggunakan Jest dan Enzyme untuk menguji unit komponen React . Ujian unit bukan sahaja meningkatkan kualiti kod, tetapi juga meningkatkan kecekapan pembangunan dan kebolehselenggaraan. Saya harap artikel ini telah memberi anda sedikit bantuan dengan ujian unit dalam projek React anda.

Atas ialah kandungan terperinci Panduan ujian unit bertindak balas: Cara memastikan kualiti kod bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Amalan ujian unit untuk antara muka dan kelas abstrak dalam Java Amalan ujian unit untuk antara muka dan kelas abstrak dalam Java May 02, 2024 am 10:39 AM

Langkah-langkah untuk antara muka ujian unit dan kelas abstrak dalam Java: Buat kelas ujian untuk antara muka. Buat kelas olok-olok untuk melaksanakan kaedah antara muka. Gunakan perpustakaan Mockito untuk mengejek kaedah antara muka dan menulis kaedah ujian. Kelas abstrak mencipta kelas ujian. Buat subkelas bagi kelas abstrak. Tulis kaedah ujian untuk menguji ketepatan kelas abstrak.

Analisis kelebihan dan kekurangan alat ujian unit PHP Analisis kelebihan dan kekurangan alat ujian unit PHP May 06, 2024 pm 10:51 PM

Analisis alat ujian unit PHP: PHPUnit: sesuai untuk projek besar, menyediakan fungsi yang komprehensif dan mudah dipasang, tetapi mungkin bertele-tele dan perlahan. PHPUnitWrapper: sesuai untuk projek kecil, mudah digunakan, dioptimumkan untuk Lumen/Laravel, tetapi mempunyai fungsi terhad, tidak menyediakan analisis liputan kod dan mempunyai sokongan komuniti terhad.

Perbezaan antara ujian prestasi dan ujian unit dalam bahasa Go Perbezaan antara ujian prestasi dan ujian unit dalam bahasa Go May 08, 2024 pm 03:09 PM

Ujian prestasi menilai prestasi aplikasi di bawah beban yang berbeza, manakala ujian unit mengesahkan ketepatan satu unit kod. Ujian prestasi memfokuskan pada mengukur masa tindak balas dan daya pemprosesan, manakala ujian unit memfokuskan pada output fungsi dan liputan kod. Ujian prestasi mensimulasikan persekitaran dunia sebenar dengan beban tinggi dan serentak, manakala ujian unit dijalankan di bawah beban rendah dan keadaan bersiri. Matlamat ujian prestasi adalah untuk mengenal pasti kesesakan prestasi dan mengoptimumkan aplikasi, manakala matlamat ujian unit adalah untuk memastikan ketepatan dan keteguhan kod.

Penyepaduan rangka kerja Java dan rangka kerja React bahagian hadapan Penyepaduan rangka kerja Java dan rangka kerja React bahagian hadapan Jun 01, 2024 pm 03:16 PM

Penyepaduan rangka kerja Java dan rangka kerja React: Langkah: Sediakan rangka kerja Java bahagian belakang. Buat struktur projek. Konfigurasikan alat binaan. Buat aplikasi React. Tulis titik akhir REST API. Konfigurasikan mekanisme komunikasi. Kes praktikal (SpringBoot+React): Kod Java: Tentukan pengawal RESTfulAPI. Kod tindak balas: Dapatkan dan paparkan data yang dikembalikan oleh API.

Apakah perbezaan antara ujian unit dan ujian integrasi dalam ujian fungsi golang? Apakah perbezaan antara ujian unit dan ujian integrasi dalam ujian fungsi golang? Apr 27, 2024 am 08:30 AM

Ujian unit dan ujian penyepaduan ialah dua jenis ujian fungsi Go yang berbeza, yang digunakan untuk mengesahkan interaksi dan penyepaduan fungsi tunggal atau berbilang fungsi masing-masing. Ujian unit hanya menguji kefungsian asas fungsi tertentu, manakala ujian penyepaduan menguji interaksi antara pelbagai fungsi dan penyepaduan dengan bahagian lain aplikasi.

Bagaimana untuk menggunakan kaedah ujian dipacu jadual dalam ujian unit Golang? Bagaimana untuk menggunakan kaedah ujian dipacu jadual dalam ujian unit Golang? Jun 01, 2024 am 09:48 AM

Ujian dipacu jadual memudahkan penulisan kes ujian dalam ujian unit Go dengan mentakrifkan input dan output yang dijangka melalui jadual. Sintaks termasuk: 1. Tentukan kepingan yang mengandungi struktur kes ujian 2. Gelung melalui kepingan dan bandingkan keputusan dengan output yang dijangkakan. Dalam kes sebenar, ujian dipacu jadual telah dilakukan pada fungsi menukar rentetan kepada huruf besar, dan gotest digunakan untuk menjalankan ujian dan keputusan lulus telah dicetak.

Ujian Unit PHP: Petua untuk Meningkatkan Liputan Kod Ujian Unit PHP: Petua untuk Meningkatkan Liputan Kod Jun 01, 2024 pm 06:39 PM

Cara meningkatkan liputan kod dalam ujian unit PHP: Gunakan pilihan --coverage-html PHPUnit untuk menjana laporan liputan. Gunakan kaedah setAccessible untuk mengatasi kaedah dan sifat peribadi. Gunakan penegasan untuk mengatasi syarat Boolean. Dapatkan cerapan liputan kod tambahan dengan alat semakan kod.

Pengujian Unit PHP: Cara Mereka Bentuk Kes Ujian Berkesan Pengujian Unit PHP: Cara Mereka Bentuk Kes Ujian Berkesan Jun 03, 2024 pm 03:34 PM

Adalah penting untuk mereka bentuk kes ujian unit yang berkesan, mematuhi prinsip berikut: atom, ringkas, boleh berulang dan tidak jelas. Langkah-langkahnya termasuk: menentukan kod yang akan diuji, mengenal pasti senario ujian, mencipta penegasan dan menulis kaedah ujian. Kes praktikal menunjukkan penciptaan kes ujian untuk fungsi max(), menekankan kepentingan senario dan penegasan ujian tertentu. Dengan mengikuti prinsip dan langkah ini, anda boleh meningkatkan kualiti dan kestabilan kod.

See all articles