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

   #🎜 🎜#

Buat fail jest.config.js dalam direktori akar projek dan konfigurasikan kandungan berikut:

2. module.exports = {
     verbose: true,
     setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
   };

   #🎜🎜 Di bawah folder src Cipta fail setupTests.js dan konfigurasikan kandungan berikut:

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

3. 3. Latihan ujian unit bertindak balas
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;

1. Tulis kes ujian untuk komponen Counter dan buat Counter test.js, dan tambah kandungan berikut:

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');
  });
});

2. 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"
}

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:
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!