Cách kiểm thử Express.js REST API bằng Cypress

Cypress là lựa chọn tuyệt vời cho kiểm thử front-end, nhưng nó cũng có thể kiểm tra API hiệu quả.

Cypress là một framework kiểm thử phổ biến dành riêng cho các ứng dụng JavaScript. Dù nó chủ yếu được thiết kế để kiểm tra các thành phần UI và tương tác với những nhân tố giao diện trong trình duyệt, nó vẫn kiểm tra tốt API. Bạn có thể dùng framework này để kiểm tra RESTful AI qua các truy vấn HTTP và xác thực phản hồi.

Cypress cho phép bạn viết các bài kiểm tra toàn diện, xoay quanh toàn bộ chu trình làm việc của ứng dụng web.

Hướng dẫn kiểm thử API bằng Cypress

Cypress giúp bạn xác minh xem API có hoạt động đúng như mong đợi. Quá trình này thường bao gồm kiểm tra các endpoint của API, dữ liệu đầu vào và phản hồi HTTP. Bạn có thể xác minh sự tích hợp với bất kỳ dịch vụ bên ngoài, và xác nhận những cơ chế sửa lỗi hoạt động chính xác.

Kiểm tra API nhằm đảm bảo chúng hoạt động hiệu quả, đáng tin cậy và đáp ứng nhu cầu của ứng dụng phụ thuộc vào chúng. Nó giúp xác định và sửa lỗi sớm, ngăn vấn đề xảy ra trong quá trình sản xuất.

Cypress là công cụ kiểm tra UI tuyệt vời, được dùng bởi một số framework JavaScript phổ biến. Khả năng tạo và kiểm tra các truy vấn HTTP giúp nó đạt hiệu quả tương đương trong việc kiểm tra API.

npm install cypress --save-dev

Cypress thực thi nhiệm vụ trên bằng cách dùng Node.js làm công cụ tạo truy vấn HTTP và xử lý các phản hồi.

Tạo API RESST Express.js

Để bắt đầu, tạo một server web Express, và cài đặt gói này trong dự án:

npm install cors

Tiếp theo, thêm package Cypress vào dự án:

npm install cypress --save-dev

Cuối cùng, update file package.json bao gồm tập lệnh test này:

"test": "npx cypress open"

Xác định các điều khiển API

Trong trường hợp thực tế, bạn sẽ thực hiện các cuộc gọi API để đọc và ghi dữ liệu từ database hoặc API bên ngoài. Tuy nhiên, ở ví dụ này, bạn sẽ mô phỏng và kiểm tra các lệnh gọi API bằng cách thêm và tìm nạp dữ liệu người dùng từ một mảng.

Trong danh mục gốc của thư mục dự án, tạo file controllers/userControllers.js, và thêm code sau:

Đầu tiên xác định một hàm điều khiển registerUser sẽ quản lý lộ trình đăng ký của người dùng. Nó sẽ truy xuất dữ liệu người dùng từ nội dung truy vấn, tạo một đối tượng người dùng mới và thêm nó vào mảng users. Nếu quá trình này thành công, nó sẽ phản hồi bằng code trạng thái 201 và thông báo rằng nó đã đăng ký người dùng này.

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

Thêm hàm thứ hai - getUsers - để truy xuất dữ liệu người dùng từ mảng, và trả nó về dưới dạng phản hồi JSON.

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

Cuối cùng, bạn cũng có thể mô phỏng các lần thử đăng nhập. Trong cùng file này, thêm code này để kiểm tra xem tên người dùng và mật khẩu được cung cấp có khớp với bất kỳ dữ liệu người dùng trong mảng users:

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

Xác định lộ trình API

Để xác định lộ trình cho Express REST API của bạn, tạo một file routes/userRoutes.js trong thư mục gốc, và thêm code này vào nó:

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;

Cập nhật file Server.js

Update file server.js để cấu hình API như sau:

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;

Thiết lập môi trường thử nghiệm

Với API thử nghiệm tại chỗ, bạn đã sẵn sàng thiết lập môi trường thử nghiệm. Khởi động server lập trình bằng lệnh terminal này:

node server.js

Tiếp theo, chạy lệnh script kiểm thử trong một terminal riêng:

npm run test

Lệnh này sẽ mở client desktop Cypress, cung cấp môi trường thử nghiệm. Sau khi nó mở, click nút E2E Testing. Các quá trình kiểm thử end-to-end đảm bảo rằng bạn kiểm tra toàn bộ Express API, nghĩa là Cypress sẽ có quyền truy cập server web, lộ trình và các hàm điều khiển liên quan.

Tiếp theo, click Continue để thêm file cấu hình Cypress.

Sau khi quá trình thiết lập hoàn tất, bạn sẽ thấy một thư mục Cypress mới trong dự án. Cypress cũng sẽ thêm một file cypress.config.js mà chứa các cài đặt cấu hình cho quá trình kiểm thử của bạn.

Tiếp tục và update file để bao gồm URL cơ sở máy chủ như sau:

const { defineConfig } = require("cypress");

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

Viết các trường hợp thử nghiệm

Giờ bạn đã sẵn sàng viết một số trường hợp thử nghiệm. Đầu tiên, chọn trình duyệt mà Cypress sẽ mở để chạy các bài kiểm tra từ những lựa chọn sẵn có trên client Cypress.

Tiếp theo, click nút Create new spec để tạo file kiểm tra, và cung cấp một cái tên. Sau đó click Create spec.

Giờ mở file cypress/fixtures/example.json, và update nội dung của nó kèm thông tin xác thực người dùng dưới đây. Fixture là file chứa dữ liệu kiểm tra tĩnh mà bạn có thể dùng trong các trường hợp thử nghiệm.

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

Cypress cung cấp phương thức cy.request để tạo truy vấn HTTP tới server web. Bạn có thể dùng nó kiểm tra các kiểu endpoint HTTP khác nhau, mà quản lý từng hoạt động riêng, bao gồm GET, POST, PUT và DELETE.

Để kiểm tra lộ trình 3 API bạn đã xác định từ đầu, bằng đầu bằng cách mô tả trường hợp thử nghiệm cho endpoint đăng ký. Trường hợp thử nghiệm này sẽ xác minh endpoint có đang hoạt động chính xác bằng cách đăng ký thành công người dùng mới và xác nhận thông tin chính xác.

Mở file cypress/e2e/user.routes.spec.cy.js và update nội dung của nó bằng code sau:

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

Trong thử nghiệm này, Cypress sẽ tải dữ liệu kiểm tra trong file fixture, và tạo các truy vấn POST tới endpoint được chỉ định với dữ liệu trong phần nội dung truy vấn. Nếu tất cả xác nhận đều được thông qua, trường hợp thử nghiệm thành công. Nếu không, nó sẽ thất bại.

Điều đáng lưu ý ở đây là cú pháp dành cho Cypress kiểm tra gần giống cú pháp được dùng ở các thử nghiệm Mocha mà Cypress đã áp dụng.

Giờ mô tả thử nghiệm cho route users. Bài kiểm tra này sẽ xác minh rằng phản hồi này chứa dữ liệu người dùng khi thực hiện truy vấn tới endpoint này. Để đạt được điều đó, thêm code sau vào trong khối test describe.

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

Cuối cùng, bao gồm một trường hợp kiểm thử sẽ kiểm tra endpoint đăng nhập và chèn trạng thái phản hồi là 200, cho biết đăng nhập thành công.

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

Để chạy kiểm tra này, quay lại phiên bản trình duyệt do Cypress quản lý và chọn file test cụ thể mà bạn muốn chạy.

Trình chạy test Cypress sẽ chạy các bài kiểm tra và ghi lại kết quả, hiện trạng thái vượt qua hay thất bại của từng trường hợp test.

Ví dụ trên minh họa cách bạn có thể kiểm tra các route khác nhau và hàm điều khiển tương ứng nhằm đảm bảo chức năng và hành vi của chúng hoạt động đúng như mong đợi.

Nhìn chung, Cypress là một công cụ tuyệt vời để kiểm tra ứng dụng web, bao gồm cả front-end và back-end. Hãy thử và cảm nhận lợi ích tuyệt vời mà nó mang lại nhé!