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

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

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)

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.

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.

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.

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.

Integrasi ujian unit PHP dan penghantaran berterusan Integrasi ujian unit PHP dan penghantaran berterusan May 06, 2024 pm 06:45 PM

Ringkasan: Dengan menyepadukan rangka kerja ujian unit PHPUnit dan saluran paip CI/CD, anda boleh meningkatkan kualiti kod PHP dan mempercepatkan penghantaran perisian. PHPUnit membenarkan penciptaan kes ujian untuk mengesahkan kefungsian komponen, dan alatan CI/CD seperti GitLabCI dan GitHubActions boleh menjalankan ujian ini secara automatik. Contoh: Sahkan pengawal pengesahan dengan kes ujian untuk memastikan fungsi log masuk berfungsi seperti yang diharapkan.

Asas Pengujian Unit PHP: Menulis Kod Teguh dan Boleh Diselenggara Asas Pengujian Unit PHP: Menulis Kod Teguh dan Boleh Diselenggara Jun 03, 2024 am 10:17 AM

PHPUnit ialah rangka kerja ujian unit PHP yang popular yang boleh digunakan untuk menulis kes ujian yang mantap dan boleh diselenggara. Ia mengandungi langkah-langkah berikut: memasang PHPUnit dan mencipta direktori ujian untuk menyimpan fail ujian. Buat kelas ujian yang mewarisi PHPUnit\Framework\TestCase. Tentukan kaedah ujian bermula dengan "ujian" untuk menerangkan fungsi yang akan diuji. Gunakan penegasan untuk mengesahkan bahawa keputusan yang dijangkakan adalah konsisten dengan keputusan sebenar. Jalankan vendor/bin/phpunit untuk menjalankan ujian daripada direktori akar projek.

See all articles