Cypress sangat bagus untuk pengujian front-end, tetapi Cypress juga dapat menguji API Anda secara efektif.

Cypress adalah kerangka pengujian populer yang dirancang untuk aplikasi JavaScript. Meskipun ini terutama dirancang untuk menguji komponen UI dan interaksi dengan elemen UI di browser, namun juga demikian sangat cocok untuk menguji API. Anda dapat menggunakan kerangka kerja ini untuk menguji RESTful API melalui permintaan HTTP dan memvalidasinya tanggapan.

Cypress memungkinkan Anda menulis tes komprehensif yang mencakup spektrum penuh alur kerja aplikasi web Anda.

Memulai Pengujian API Menggunakan Cypress

Cypress membantu Anda memverifikasi bahwa API Anda berfungsi sesuai harapan. Proses ini biasanya mencakup pengujian titik akhir API, data masukan, dan respons HTTP. Anda dapat memverifikasi integrasi dengan layanan eksternal apa pun, dan mengonfirmasi bahwa mekanisme penanganan kesalahan berfungsi dengan benar.

Menguji API Anda memastikan API berfungsi, andal, dan memenuhi kebutuhan aplikasi yang bergantung padanya. Ini membantu mengidentifikasi dan memperbaiki bug sejak dini, mencegah terjadinya masalah dalam produksi.

instagram viewer

cemara adalah alat pengujian UI yang hebat, digunakan oleh beberapa orang kerangka kerja JavaScript populer. Kemampuannya untuk membuat dan menguji permintaan HTTP membuatnya sama efektifnya dalam menguji API.

Hal ini dilakukan dengan menggunakan Node.js sebagai mesinnya untuk membuat permintaan HTTP dan menangani responsnya.

Anda dapat menemukan kode proyek ini di dalamnya GitHub gudang.

Buat REST API Express.js

Untuk memulai, membuat server web Ekspres, dan instal paket ini di proyek Anda:

npm install cors

Selanjutnya, tambahkan paket Cypress ke proyek Anda:

npm install cypress --save-dev

Terakhir, perbarui paket.json file untuk menyertakan skrip pengujian ini:

"test": "npx cypress open"

Tentukan Pengontrol API

Dalam kasus dunia nyata, Anda akan melakukan panggilan API untuk membaca dan menulis data dari database atau API eksternal. Namun, untuk contoh ini, Anda akan menyimulasikan dan menguji panggilan API tersebut dengan menambahkan dan mengambil data pengguna dari array.

Di direktori root folder proyek Anda, buat a pengontrol/penggunaControllers.js file, dan tambahkan kode berikut.

Pertama, tentukan a daftarPengguna fungsi pengontrol yang akan mengatur rute pendaftaran pengguna. Ini akan mengekstrak data pengguna dari badan permintaan, membuat objek pengguna baru, dan menambahkannya ke pengguna Himpunan. Jika proses berhasil, proses tersebut akan merespons dengan kode status 201 dan pesan yang menunjukkan bahwa pengguna telah terdaftar.

const users = [];
exports.registerUser = async (req, res) => {
const { username, password } = req.body;
try {
const newUser = { username, password };
 users.push(newUser);
 res.status(201).send({ message: 'User registered successfully' });
 } catch (error) {
console.error(error);
 res.status(500).send({ message: 'An error occurred!!' });
 }
};

Tambahkan fungsi kedua—dapatkanPengguna—untuk mengambil data pengguna dari array, dan mengembalikannya sebagai respons JSON.

exports.getUsers = async (req, res) => {
try {
 res.json(users);
 } catch (error) {
console.error(error);
 res.status(500).send({ message: 'An error occurred!!' });
 }
};

Terakhir, Anda juga dapat menyimulasikan upaya login. Di file yang sama, tambahkan kode ini untuk memeriksa apakah nama pengguna dan kata sandi yang diberikan cocok dengan data pengguna di pengguna Himpunan:

exports.loginUser = async (req, res) => {
const { username, password } = req.body;
try {
const user = users.find((u) =>
 u.username username && u.password password);
if (user) {
 res.status(200).send({ message: 'Login successful' });
 } else {
 res.status(401).send({ message: 'Invalid credentials' });
 }
 } catch (error) {
console.error(error);
 res.status(500).send({ message: 'An error occurred!!' });
 }
};

Tentukan Rute API

Untuk menentukan rute untuk Express REST API Anda, buat yang baru rute/userRoutes.js file di direktori root, dan tambahkan kode ini ke dalamnya:

const express = require('express');
const router = express.Router();
const userControllers = require('../controllers/userControllers');
const baseURL = '/v1/api/';


router.post(baseURL + 'register', userControllers.registerUser);
router.get(baseURL + 'users', userControllers.getUsers);
router.post(baseURL + 'login', userControllers.loginUser);
module.exports = router;

Perbarui File Server.js

Perbarui server.js file untuk mengkonfigurasi API sebagai berikut:

const express = require('express');
const cors = require('cors');
const app = express();
const port = 5000;
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cors());


const userRoutes = require('./routes/userRoutes');
app.use('/', userRoutes);


app.listen(port, () => {
console.log(`Server is listening at http://localhost:${port}`);
});
module.exports = app;

Siapkan Lingkungan Pengujian

Dengan API demo yang ada, Anda siap menyiapkan lingkungan pengujian. Mulai server pengembangan dengan perintah terminal ini:

node server.js

Selanjutnya, jalankan perintah skrip pengujian di terminal terpisah:

npm run test

Perintah ini akan meluncurkan klien desktop Cypress, yang menyediakan lingkungan pengujian. Setelah terbuka, klik Pengujian E2E tombol. Pengujian end-to-end memastikan bahwa Anda menguji Express API secara keseluruhan, artinya Cypress akan memiliki akses ke server web, rute, dan fungsi pengontrol terkait.

Selanjutnya, klik Melanjutkan untuk menambahkan file konfigurasi Cypress.

Setelah proses penyiapan selesai, Anda akan melihat folder Cypress baru di proyek Anda. Cypress juga akan menambahkan a cemara.config.js file yang berisi pengaturan konfigurasi untuk pengujian Anda.

Lanjutkan dan perbarui file ini untuk menyertakan URL basis server Anda sebagai berikut:

const { defineConfig } = require("cypress");
module.exports = defineConfig({
 chromeWebSecurity: false,
 e2e: {
 baseUrl: 'http://localhost: 5000',
 setupNodeEvents(on, config) { 
 },
 },
});

Tulis Kasus Uji

Sekarang Anda siap untuk menulis beberapa kasus uji. Pertama, pilih browser tempat Cypress akan diluncurkan untuk menjalankan pengujian dari opsi yang tersedia di klien Cypress.

Selanjutnya, klik Buat spesifikasi baru tombol untuk membuat file pengujian Anda, dan berikan nama. Lalu klik Buat spesifikasi.

Sekarang, buka cypress/fixtures/example.json file, dan perbarui kontennya dengan kredensial pengguna berikut. Perlengkapan adalah file yang berisi data pengujian statis yang dapat Anda gunakan dalam kasus pengujian.

{
"username": "testuser",
"password": "password123"
}

Cypress menyediakan a cy.request metode untuk membuat permintaan HTTP ke server web. Anda dapat menggunakannya untuk menguji berbagai jenis titik akhir HTTP yang mengelola berbagai operasi termasuk GET, POST, PUT, dan DELETE.

Untuk menguji tiga rute API yang Anda tentukan sebelumnya, mulailah dengan menjelaskan kasus pengujian untuk titik akhir register. Kasus uji ini harus memverifikasi bahwa titik akhir berfungsi dengan benar dengan berhasil mendaftarkan pengguna baru dan memvalidasi pernyataannya.

Buka cypress/e2e/user.routes.spec.cy.js file dan perbarui isinya dengan kode berikut.

describe('User Routes', () => {
 it('registers a new user', () => { 
 cy.fixture('example').then((testUser) => { 
 cy.request({
 method: 'POST',
 url: `${baseUrl}/v1/api/register`, 
 body: testUser, 
 }).then((response) => { 
 expect(response.status).to.eq(201); 
 expect(response.body.message).to.eq('User registered successfully');
 });
 });
 });

Dalam pengujian ini, Cypress akan memuat data pengujian dalam file perlengkapan, dan membuat permintaan POST ke titik akhir yang ditentukan dengan data di badan permintaan. Jika semua pernyataan lolos, kasus uji akan lulus. Jika tidak, maka akan gagal.

Perlu dicatat bahwa sintaksis untuk pengujian Cypress sangat mirip dengan sintaksis yang digunakan dalam pengujian Mocha, yang telah diadopsi oleh Cypress.

Sekarang, jelaskan tes untuk pengguna rute. Pengujian harus memverifikasi bahwa respons berisi data pengguna saat permintaan dibuat ke titik akhir ini. Untuk mencapai hal ini, tambahkan kode berikut di dalamnya menggambarkan blok uji.

 it('gets users data and the username matches test data', () => {
 cy.fixture('example').then((expectedUserData) => {
 cy.request({
 method: 'GET',
 url: `${baseUrl}/v1/api/users`,
 }).then((response) => {
 expect(response.status).to.eq(200);
const username = response.body[0].username;
 expect(username).to.eq(expectedUserData.username);
 });
 });
 });

Terakhir, sertakan kasus uji yang akan menguji titik akhir login dan menyatakan bahwa status responsnya adalah 200, yang menunjukkan upaya login berhasil.

 it('logs in a user', () => { 
 cy.fixture('example').then((loginData) => {
 cy.request({
 method: 'POST',
 url: `${baseUrl}/v1/api/login`, 
 body: loginData, 
 }).then((response) => {
 expect(response.status).to.eq(200);
 });
 });
 });
});

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

Test runner Cypress akan menjalankan pengujian dan mencatat hasilnya, menunjukkan status lulus atau gagal dari setiap kasus pengujian.

Contoh di atas mengilustrasikan bagaimana Anda dapat menguji berbagai rute dan fungsi pengontrolnya yang terkait untuk memastikan fungsionalitas dan perilaku yang diharapkan. Meskipun penting untuk menguji fungsionalitas API, Anda tidak boleh membatasi cakupan pengujian hanya pada aspek ini.

Strategi pengujian API yang komprehensif juga harus mencakup pengujian kinerja, beban, dan integrasi dengan layanan lain. Dengan memasukkan berbagai jenis metode pengujian dalam strategi Anda, Anda dapat mencapai cakupan pengujian menyeluruh dan memastikan bahwa API Anda berfungsi dan dapat diandalkan sebelum menerapkan kode Anda ke produksi.

Menguji Seluruh Pengalaman Web Anda Menggunakan Cypress

Cypress adalah alat luar biasa untuk menguji aplikasi web, yang mencakup pengujian front-end dan back-end dengan lancar.

Dengan fitur pengujian yang mudah digunakan, Anda dapat dengan mudah dan cepat menyiapkan lingkungan pengujian dalam satu platform. Anda kemudian dapat menggunakannya untuk menguji secara menyeluruh berbagai aspek aplikasi Anda dan menjamin kinerja terbaik.