Memulai dengan Perpustakaan Pengujian Bereaksi

Memulai dengan Perpustakaan Pengujian Bereaksi

Saya bisa menebak apa yang Anda pikirkan: perpustakaan pengujian Bereaksi lain? Begitu banyak yang telah dibahas di sini tentang Trik CSS (heck, saya sudah memposting satu yang meliputi Jest dan Enzim) jadi tidak ada cukup pilihan untuk berkeliling?

Tapi perpustakaan pengujian-reaksi bukan hanya perpustakaan pengujian lain. Ya, itu adalah perpustakaan pengujian, tetapi yang dibangun dengan satu prinsip dasar yang memisahkannya dari yang lain.

Semakin banyak pengujian Anda yang menyerupai cara perangkat lunak Anda digunakan, semakin besar kepercayaan yang dapat mereka berikan kepada Anda.

Mencoba untuk menguji tes untuk bagaimana pengguna akan menggunakan aplikasi Anda. Faktanya, hal itu dilakukan sedemikian rupa sehingga pengujian tidak akan mencapai titik impas ketika Anda memperbaiki komponen. Dan saya tahu itu adalah sesuatu yang kita semua pernah temui di beberapa titik dalam perjalanan Bereaksi kita.

Kami akan meluangkan waktu menulis tes bersama-sama menggunakan perpustakaan pengujian-reaksi untuk aplikasi tugas ringan yang saya buat. Anda dapat mengkloning repo secara lokal:

git clone https://github.com/kinsomicrote/todoapp-test.git

Dan, jika Anda melakukannya, instal paket yang diperlukan berikutnya:

## yarn yarn add --dev react-testing-library jest-dom 
## npm npm install --save-dev react-testing-library jest-dom

Jika Anda bertanya-tanya mengapa Jest ada di sana, kami menggunakannya untuk penegasan. Buat folder bernama __test__ di dalam direktori src dan buat file baru bernama App.test.js.

Mengambil foto

Tes foto menyimpan catatan tes yang telah dilakukan pada komponen yang diuji sebagai cara untuk melihat secara visual apa yang berubah di antara perubahan.

Ketika kami pertama kali menjalankan tes ini, kami mengambil snapshot pertama tentang bagaimana komponen terlihat. Dengan demikian, tes pertama pasti akan dilewati karena, yah, tidak ada snapshot lain untuk membandingkannya dengan itu akan menunjukkan sesuatu yang gagal. Itu hanya gagal ketika kita membuat perubahan baru ke komponen dengan menambahkan elemen, kelas, komponen, atau teks baru. Menambahkan sesuatu yang tidak ada ketika snapshot dibuat atau terakhir diperbarui.

Tes snapshot akan menjadi tes pertama yang akan kami tulis di sini. Mari kita buka file App.test.js dan membuatnya terlihat seperti ini:

import React from 'react'; 
import { render, cleanup } from "react-
testing-library"; 
import "jest-dom/extend-expect"; import App from './App';
afterEach(cleanup); it("matches snapshot", () => { 
const { asFragment } = render(); expect(asFragment()).toMatchSnapshot(); 
});

Ini mengimpor paket yang diperlukan yang kami gunakan untuk menulis dan menjalankan tes. render digunakan untuk menampilkan komponen yang ingin kita uji. Kami menggunakan pembersihan untuk menghapus semuanya setelah setiap tes berjalan - seperti yang Anda lihat dengan garis afterEach (pembersihan).

Menggunakan asFragment, kita mendapatkan DocumentFragment dari komponen yang diberikan. Lalu kami berharap itu cocok dengan foto yang telah dibuat.

Mari kita jalankan tes untuk melihat apa yang terjadi:

## yarn yarn test 
## npm npm test

Seperti yang kita ketahui sekarang, snapshot komponen dibuat dalam folder baru bernama __snapshots__ di dalam direktori __tests__ jika ini adalah tes pertama kami. Kami sebenarnya mendapatkan file bernama App.test.js.snap di sana yang akan terlihat seperti ini:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`matches snapshot 1`] = `
 




 Add Todo 





 



 





 Lists 

 

Buy Milk  

 

Write tutorial  





 `;

Sekarang, mari kita uji elemen dan acara DOM

Aplikasi kami mencakup dua item agenda yang ditampilkan secara default saat aplikasi pertama kali dijalankan. Kami ingin memastikan bahwa mereka muncul, pada kenyataannya, muncul secara default pada aplikasi pertama yang dijalankan jadi, untuk menguji ini, kami harus menargetkan daftar yang tidak berurutan (<ul>) dan memeriksa panjangnya. Kami berharap panjangnya sama dengan dua - jumlah item.

it('it displays default todo items', () => { 
const { getByTestId } = render(); 
const todoList = getByTestId('todos-
ul'); expect(todoList.children.length).toBe(2); });

Kami menggunakan getByTestId dalam cuplikan itu untuk mengekstrak ID uji dari komponen Aplikasi. Kami kemudian mengatur todoList untuk menargetkan elemen todos-ul. Itu yang seharusnya kembali sebagai dua.

Dengan menggunakan apa yang telah kami pelajari sejauh ini, lihat apakah Anda dapat menulis tes untuk menegaskan bahwa pengguna dapat memasukkan nilai di bidang input. Berikut adalah hal-hal yang ingin Anda lakukan:

Dapatkan kolom input
Tetapkan nilai untuk bidang input
Pemicu acara perubahan
Menyatakan bahwa bidang input memiliki nilainya seperti yang Anda atur di Langkah 2
Jangan mengintip jawaban saya di bawah ini! Luangkan waktu sebanyak yang Anda butuhkan.

Masih berjalan? Besar! Saya akan mengambil kopi dan segera kembali.

Mmm, kopi. ☕️

Oh, kamu sudah selesai! Kamu keren. Mari kita bandingkan jawaban. Milik saya terlihat seperti ini:

it('allows input', () => { 
const {getByTestId } = render()
let item = 'Learn React' 
const todoInputElement =
 getByTestId('todo-input');
 todoInputElement.value = item;
 fireEvent.change(todoInputElement); expect(todoInputElement.value).toBe('Lear
n React') });

Menggunakan getByTestId, saya dapat mengekstraksi ID uji dalam aplikasi. Kemudian saya membuat variabel yang diatur ke string Belajar Bereaksi, dan menjadikannya nilai bidang input. Selanjutnya, saya mendapatkan bidang input menggunakan ID tesnya dan menjalankan acara perubahan setelah menetapkan nilai bidang input. Setelah itu selesai, saya menyatakan bahwa nilai bidang input memang Learn React.

Apakah itu cocok dengan jawaban Anda? Tinggalkan komentar jika Anda memiliki cara lain untuk menyelesaikannya!

Selanjutnya, mari kita uji bahwa kita dapat menambahkan item yang harus dilakukan. Kita perlu mendapatkan kolom input, tombol untuk menambahkan item baru dan daftar yang tidak diurutkan karena itu semua adalah elemen yang diperlukan untuk membuat item baru.

Kami menetapkan nilai untuk bidang input dan kemudian memicu klik tombol untuk menambahkan tugas. Kami dapat melakukan ini dengan mendapatkan tombol menggunakan getByText - dengan memicu acara klik pada elemen DOM dengan teks Tambahkan Tugas, kami harus dapat menambahkan item yang harus dilakukan.

Mari kita nyatakan bahwa jumlah anak (daftar item) dalam elemen daftar tidak berurutan sama dengan tiga. Ini mengasumsikan bahwa tugas-tugas default masih berlaku.

it('adds a new todo item', () => { 
const { getByText, getByTestId } =
 render(); 
const todoInputElement =
 getByTestId('todo-input'); 
const todoList = getByTestId('todos-
ul'); 
todoInputElement.value = 'Learn React'; fireEvent.change(todoInputElement);
 fireEvent.click(getByText('Add Task')) expect(todoList.children.length).toBe(3); });

Ini hanya satu cara untuk menguji di Bereaksi

Anda dapat mencoba mereaksi pengujian perpustakaan di aplikasi Bereaksi berikutnya. Dokumentasi dalam repo sangat teliti dan - seperti kebanyakan alat - tempat terbaik untuk memulai. Kent C. Dodds membangunnya dan memiliki kursus lengkap tentang pengujian di Frontend Masters (diperlukan berlangganan) yang juga mencakup seluk beluk perpustakaan reaksi-pengujian.

Yang mengatakan, ini hanya satu sumber pengujian untuk Bereaksi. Ada yang lain, tentu saja, tetapi mudah-mudahan ini adalah salah satu yang Anda tertarik untuk mencoba sekarang karena Anda telah melihatnya sedikit tetapi menggunakan yang terbaik untuk proyek Anda, tentu saja.

Share this post