Cara Menguji Komponen React Menggunakan Jest

Artikel ini meneroka menggunakan JEST, rangka kerja ujian yang dikendalikan oleh Facebook, untuk menguji komponen React dan fungsi JavaScript biasa. Kami akan bermula dengan fungsi JavaScript yang mudah sebelum berpindah ke ciri-ciri khusus React. Jest tidak semata -mata untuk bertindak balas; Ia cukup serba boleh untuk sebarang aplikasi JavaScript. Walau bagaimanapun, ciri -cirinya amat berguna untuk ujian UI, menjadikannya sesuai untuk bertindak balas.

Mata utama:

Gunakan jest untuk menguji komponen reaksi dan fungsi JavaScript.
Mulakan dengan fungsi JavaScript mudah untuk mempelajari asas -asas jest.
Pasang Jest dan Babel untuk keserasian React.
Gunakan mod jam tangan jest untuk ujian semula ujian yang efisien.
untuk komponen React, pertimbangkan enzim atau reaksi perpustakaan ujian.
Gunakan Jest's Mocking, Spies, dan Ujian Selari.

aplikasi todo sampel:

Aplikasi Todo kecil (boleh didapati di GitHub dan sebagai demo langsung) berfungsi sebagai subjek ujian kami. Ia dibina menggunakan ES2015, Webpack, dan Babel. Logik teras berada dalam

, yang mengandungi fungsi tulen (, app/state-functions.js, toggleDone) yang menguruskan keadaan aplikasi. Fungsi -fungsi ini sama dengan pengurangan redux. addTodo deleteTodo

Pembangunan yang didorong oleh ujian (TDD):

Walaupun TDD (ujian menulis sebelum kod) mempunyai kelebihan, pendekatan ini sering menjadi masalah keutamaan peribadi. Untuk komponen React, menulis komponen terlebih dahulu dan kemudian menambah ujian sering praktikal.

Memperkenalkan jest:

Jest, dengan ketara diperbaiki oleh Facebook, menawarkan persediaan yang diperkemas berbanding dengan rangka kerja lain. Pelaksanaan ujian selari dan mod menonton dengan ketara meningkatkan kelajuan dan kecekapan ujian. Ia termasuk JSDOM untuk ujian seperti penyemak imbas dalam node.js dan menyokong ujian asynchronous, mengejek, mengintip, dan stubs.

Pemasangan dan Konfigurasi:

Pasang pakej yang diperlukan:

Pastikan fail

npm install --save-dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react

hadir (contoh yang disediakan dalam artikel asal). Jest mengharapkan ujian dalam direktori

(atau fail yang berakhir di babel.config.js atau __tests__). .test.js .spec.js

Ujian Logik Perniagaan:

ujian mudah untuk

menunjukkan penggunaan jest:

toggleDone

import { toggleDone } from '../app/state-functions';

test('toggleDone completes an incomplete todo', () => {
  const startState = [{ id: 1, done: false, text: 'Buy Milk' }];
  const finState = toggleDone(startState, 1);
  expect(finState).toEqual([{ id: 1, done: true, text: 'Buy Milk' }]);
});

digunakan untuk perbandingan objek/array, manakala

adalah untuk jenis primitif. Mod Watch JEST ( atau ) secara automatik menguji ujian pada perubahan fail. Ujian serupa untuk toEqual juga ditunjukkan dalam artikel asal. toBe npm test -- --watch jest --watch Ujian Komponen Reacting: deleteTodo

Ujian komponen React sering melibatkan ujian yang kurang komprehensif daripada logik perniagaan. Enzim (atau Perpustakaan Ujian React, seperti yang disyorkan oleh pasukan React) memudahkan proses ini. Pasang enzim dan penyesuai yang sesuai:

npm install --save-dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react

create setup-tests.js untuk mengkonfigurasi enzim:

import { toggleDone } from '../app/state-functions';

test('toggleDone completes an incomplete todo', () => {
  const startState = [{ id: 1, done: false, text: 'Buy Milk' }];
  const finState = toggleDone(startState, 1);
  expect(finState).toEqual([{ id: 1, done: true, text: 'Buy Milk' }]);
});

Konfigurasi jest dalam package.json untuk menggunakan setup-tests.js:

npm install --save-dev enzyme @wojtekmaj/enzyme-adapter-react-17

Ujian untuk rendering komponen Todo ditunjukkan, menggunakan mount untuk membuat dan find untuk mencari unsur -unsur. Ujian berikutnya menggunakan jest.fn() untuk membuat fungsi pengintip dan simulate('click') untuk mencetuskan peristiwa, mengesahkan fungsi panggilan dengan toBeCalledWith.

Kesimpulan:

kelajuan Jest, mod menonton, dan API ekspresif menjadikannya rangka kerja ujian yang kuat. Artikel ini menyimpulkan dengan ringkasan manfaatnya dan cadangan bacaan selanjutnya, bersama -sama dengan Soalan Lazim yang menangani soalan -soalan umum mengenai ujian komponen reaksi dengan jest. Soalan Lazim Cover render, React Test Renderer, ujian komponen dengan prop, dan fungsi ujian dalam komponen.

Atas ialah kandungan terperinci Cara Menguji Komponen React Menggunakan Jest. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!