Pengujian yang ketat memenuhi dunia nyata dengan simulasi pengujian pengguna ujung ke ujung.

Pengembangan frontend melibatkan pembuatan aplikasi yang menarik secara visual dan fungsional untuk dilihat oleh klien. Tapi ada batasannya; aplikasi ini harus memastikan bahwa pengguna mendapatkan pengalaman yang lancar.

Meskipun pengujian unit dan integrasi penting untuk memverifikasi fungsionalitas aplikasi, pengujian tersebut mungkin tidak sepenuhnya menangkap interaksi pengguna pada umumnya. Untuk benar-benar menyimulasikan perjalanan pengguna, Anda perlu menjalankan pengujian menyeluruh yang mereplikasi interaksi pengguna sebenarnya. Ini akan memastikan aplikasi Anda berfungsi sesuai keinginan Anda dari awal hingga akhir.

Memulai Pengujian End-to-End Menggunakan Cypress

Tujuan utama pengujian end-to-end dalam aplikasi front-end adalah untuk memverifikasi hasil, bukan rincian implementasi logika bisnis.

Ambil formulir login sebagai contoh. Idealnya, Anda akan menguji apakah layar login muncul sebagaimana mestinya dan berfungsi sebagaimana mestinya. Pada dasarnya, rincian teknis yang mendasarinya tidak penting. Tujuan akhirnya hanyalah mengambil posisi pengguna dan mengevaluasi seluruh pengalaman mereka.

instagram viewer

cemara adalah kerangka pengujian otomatisasi hebat yang kompatibel dengan beberapa di antaranya kerangka kerja JavaScript paling populer. Kemampuannya untuk menjalankan pengujian langsung di browser dan rangkaian fitur pengujiannya yang komprehensif menjadikan pengujian lancar dan efisien. Ini juga mendukung berbagai pendekatan pengujian termasuk:

  • Tes Satuan
  • Tes Ujung-ke-Ujung
  • Tes Integrasi

Untuk menulis pengujian end-to-end pada aplikasi React, pertimbangkan cerita pengguna berikut:

  • Pengguna dapat melihat kolom input dengan tombol kirim yang sesuai.
  • Seorang pengguna dapat memasukkan permintaan pencarian di kolom input.
  • Setelah mengklik tombol kirim, pengguna akan melihat daftar item yang ditampilkan tepat di bawah kolom input.

Dengan mengikuti cerita pengguna ini, Anda dapat membangun aplikasi React sederhana yang memungkinkan pengguna mencari produk. Aplikasi akan mengambil data produk dari API DummyJSON dan merendernya di halaman.

Anda dapat menemukan kode proyek ini di dalamnya GitHub gudang

Siapkan Proyek React

Untuk memulai, buat proyek React menggunakan Vite atau gunakan perintah create-react-app untuk menyiapkan aplikasi React dasar. Setelah proses instalasi selesai, lanjutkan dan instal paket Cypress sebagai dependensi dev di proyek Anda:

npm install cypress --save-dev

Sekarang, perbarui paket.json file dengan menambahkan skrip ini:

"test": "npx cypress open"

Buat Komponen Fungsional

Dalam src direktori, buat folder dan beri nama komponen. Di dalam folder ini, tambahkan yang baru produk.jsx file, dan sertakan kode di bawah ini.

import React, { useState, useEffect } from'react';
import"./style.component.css"
exportdefaultfunctionProducts(prop) {
const [products, setProducts] = useState([]);
const [error, setError] = useState(null); 
const { searchInput } = prop;
return (
"product-catalogue">
 {error? (
Product not found</p>
 ): (


"product-list">
 {products.slice(0, 6).map((product) => (
"product" key={product.id}>
Title: {product.title}</h2>




Price: ${product.price}</p>
 </div>
 ))}
 </div>
 )}
 </div>
 );
}

Dalam komponen fungsional, tentukan a gunakanEffect hook, yang menjalankan fungsi asinkron yang mengambil data produk berdasarkan permintaan pencarian yang disediakan.

 useEffect(() => {
const fetchProducts = async () => {
if (searchInput) {
const apiUrl = `https://dummyjson.com/products/category/${searchInput}`;
try {
const response = await fetch(apiUrl);
if (!response.ok) {
thrownewError('Error fetching products');
 }
const json = await response.json();
 setProducts(json.products);
 setError(null); 
 } catch (error) {
 setError(error.message);
 }
 }
 };
 fetchProducts();
 }, [searchInput]);

Perbarui File App.jsx

Sekarang, perbarui Aplikasi.jsx file dengan kode berikut:

import React, { useState, useRef } from'react'
import'./App.css'
import Products from'./components/Products'
functionApp() {
const [searchInput, setSearchInput] = useState('')
const searchInputRef = useRef('');


const handleSubmit = (e) => {
 setSearchInput(searchInputRef.current.value);
 }


return (




Cypress Testing Library tutorial</h1>






exportdefault App

Silakan dan mulai server pengembangan.

npm run dev

Besar! Anda seharusnya dapat mengambil data produk tertentu dari API JSON tiruan.

Siapkan Lingkungan Pengujian

Pertama, jalankan perintah skrip pengujian di terminal Anda:

npm run test

Perintah ini akan memicu dan membuka klien Cypress. Silakan dan klik Pengujian E2E tombol.

Selanjutnya, klik Melanjutkan untuk menambahkan file konfigurasi Cypress.

Setelah proses ini selesai, Anda akan melihat direktori tes Cypress baru di proyek Anda. Selain itu, klien Cypress secara otomatis menambahkan file cypress.config.js. Anda dapat memperbarui file ini untuk lebih menyesuaikan berbagai aspek lingkungan pengujian, perilaku, dan pengaturan Anda.

Tulis Tes End-to-End Menggunakan Cypress

Untuk menulis pengujian pertama, Anda perlu memilih browser tempat pengujian akan dijalankan. Pilih opsi pilihan Anda dari yang tersedia di klien Cypress.

Cypress akan meluncurkan versi sederhana dari browser yang Anda pilih, menciptakan lingkungan terkendali untuk menjalankan pengujian.

Pilih Buat spesifikasi baru pilihan untuk membuat file pengujian Anda.

Buka editor kode Anda, buka cypress/e2e/App.spec.cy.js file, dan perbarui konten file itu dengan kode berikut.

describe('App Tests', () => {
 beforeEach(() => {
 cy.visit('http://127.0.0.1:5173/'); 
 });
 it('Renders input field and submit button', () => { 
 cy.get('#text').should('exist').should('be.visible');
 cy.get('#btn').should('exist').should('be.visible').contains('Submit');
 });
 it('Enters a search query', () => {
const searchQuery = 'laptops';
 cy.get('#text').type(searchQuery);
 });
});

Kembali ke cerita pengguna yang disorot di atas, rangkaian pengujian khusus ini memverifikasi dua aspek:

  • Bahwa browser menampilkan kolom input dan tombol kirim pada halaman.
  • Bahwa penggunaannya dapat memasukkan permintaan pencarian.

Seperti alat pengujian JavaScript lainnya seperti Jest dan Supertest, Cypress menggunakan sintaks dan bahasa deklaratif untuk menentukan kasus pengujian.

Untuk menjalankan pengujian, kembali ke versi browser sederhana yang dikelola oleh Cypress dan pilih file pengujian spesifik yang ingin Anda jalankan.

Cypress akan menjalankan tes dan menampilkan hasilnya di panel sisi kiri taman bermain tes.

Simulasi Proses Aplikasi

Untuk memastikan bahwa Anda menjalani dan menguji seluruh perjalanan pengguna—dalam kasus penggunaan khusus ini—Anda perlu memverifikasi hal tersebut aplikasi dapat mengambil masukan pengguna, mengambil data yang diperlukan, dan terakhir, menampilkan data di browser halaman.

Agar lebih jelas, Anda dapat membuat file pengujian baru untuk mengakomodasi rangkaian pengujian yang berbeda di dalamnya e2e map. Alternatifnya, Anda juga dapat memilih untuk menyertakan semua rangkaian pengujian yang mengeksplorasi kasus pengujian tertentu dalam satu file pengujian.

Silakan dan buat yang baru Produk.spec.cy.js berkas di e2e map. Di dalam file ini, sertakan kode berikut.

describe('Products Tests', () => {
 it(' fetches and displays the data', () => {
const searchQuery = 'laptops';
 cy.visit('http://127.0.0.1:5173'); 

 cy.get('#text').type(searchQuery);
 cy.get('#btn').contains('Submit').click();

 cy.get('.product').should('have.length.greaterThan', 0);

 cy.get('.product').first().should('contain', 'Title'); 
 cy.get('.product').first().should('contain', 'Price: $');
 });
 });

Rangkaian pengujian ini memeriksa bahwa, setelah pengguna mengirimkan item pencarian tertentu, aplikasi akan mengambil dan menampilkan data di halaman browser.

Ia melakukannya dengan mensimulasikan proses memasukkan input pencarian, mengklik tombol kirim, menunggu produk yang akan dimuat, dan kemudian memverifikasi keberadaan item produk, beserta detail seperti judul dan harga. Intinya, ini menangkap dan memverifikasi keseluruhan pengalaman dari sudut pandang pengguna.

Mensimulasikan Kesalahan dan Respons

Anda juga dapat menyimulasikan berbagai skenario kesalahan dan respons dalam pengujian Cypress Anda.

Buat yang baru Kesalahan.spec.cy.js berkas di e2e direktori dan sertakan kode berikut.

describe('Error Handling Tests', () => {
 it('Displays error message for incorrect search query', () => {

 cy.intercept('GET', /https:\/\/dummyjson\.com\/products\/category\/.*/, {
 statusCode: 404, // Not Found
 body: 'Product not found'
 }).as('fetchProducts');
 cy.visit('http://127.0.0.1:5173');


const incorrectSearchQuery = 'rocket';
 cy.get('#text').type(incorrectSearchQuery);
 cy.get('#btn').click();


 cy.wait('@fetchProducts');
 cy.contains('Product not found').should('be.visible');
 });
 });

Rangkaian pengujian ini memeriksa apakah pesan kesalahan ditampilkan ketika pengguna memasukkan kueri penelusuran yang salah.

Agar kasus uji dapat lulus, ia menggunakan Cypress' mencegat berfungsi untuk mematikan jaringan dan mensimulasikan kesalahan permintaan jaringan. Ia kemudian memeriksa bahwa setelah memasukkan permintaan pencarian yang salah di kolom input dan memulai proses pengambilan, pesan kesalahan— Produk tidak ditemukan—terlihat ditampilkan di halaman.

Hasil ini menunjukkan bahwa mekanisme penanganan kesalahan berfungsi sesuai harapan.

Menggunakan Cypress dalam Pengembangan Berbasis Tes

Pengujian merupakan persyaratan pengembangan yang mendasar, namun juga bisa menjadi proses yang memakan waktu. Namun, menggabungkan Cypress dapat memberikan kepuasan tersendiri saat menyaksikan kasus pengujian Anda berjalan bersama.

Cypress adalah alat hebat untuk mengimplementasikan pengembangan berbasis pengujian dalam aplikasi—tidak hanya menyediakan rangkaian fitur pengujian yang komprehensif, namun juga mendukung berbagai strategi pengujian. Untuk mendapatkan hasil maksimal dari Cypress, silakan jelajahi dokumentasi resminya untuk menemukan lebih banyak kemampuan pengujian.