Testing and Debugging the Chat Feature Socket.io and Real-Time Messaging

Testing and Debugging the Chat Feature

Testing real-time chat is more complex than testing REST APIs. This guide covers testing strategies and debugging.

Testing Socket.io with Socket.io Client

// test/chat.test.js
const { io } = require("socket.io-client");
const { createServer } = require("http");
const app = require("../src/app");
const User = require("../src/models/User");

describe("Chat Feature", () => {
  let server, senderSocket, receiverSocket, senderUser, receiverUser;
  
  beforeAll(async () => {
    server = createServer(app);
    const io = require("../src/config/socket").init(server);
    server.listen(3001);
    
    // Create test users
    senderUser = await User.create({ 
      firstName: "Sender", email: "[email protected]", password: "Test@1234" 
    });
    receiverUser = await User.create({ 
      firstName: "Receiver", email: "[email protected]", password: "Test@1234" 
    });
    
    // Create JWT tokens
    const senderToken = jwt.sign({ _id: senderUser._id }, process.env.JWT_SECRET);
    const receiverToken = jwt.sign({ _id: receiverUser._id }, process.env.JWT_SECRET);
    
    // Connect clients
    senderSocket = io("http://localhost:3001", { 
      auth: { token: senderToken }, transports: ["websocket"] 
    });
    receiverSocket = io("http://localhost:3001", { 
      auth: { token: receiverToken }, transports: ["websocket"] 
    });
  });
  
  afterAll(async () => {
    senderSocket.disconnect();
    receiverSocket.disconnect();
    server.close();
  });
  
  test("should send and receive a message", (done) => {
    // Receiver listens for message
    receiverSocket.on("message:received", (message) => {
      expect(message.text).toBe("Hello!");
      expect(message.senderId).toBe(senderUser._id.toString());
      done();
    });
    
    // Receiver joins chat
    receiverSocket.emit("join:chat", { targetUserId: senderUser._id.toString() });
    
    // Sender joins and sends message
    senderSocket.emit("join:chat", { targetUserId: receiverUser._id.toString() });
    
    setTimeout(() => {
      senderSocket.emit("message:send", 
        { targetUserId: receiverUser._id.toString(), text: "Hello!" },
        (response) => {
          expect(response.success).toBe(true);
        }
      );
    }, 100);
  });
  
  test("should show typing indicator", (done) => {
    receiverSocket.on("typing:update", (data) => {
      expect(data.userId).toBe(senderUser._id.toString());
      expect(data.isTyping).toBe(true);
      done();
    });
    
    receiverSocket.emit("join:chat", { targetUserId: senderUser._id.toString() });
    senderSocket.emit("join:chat", { targetUserId: receiverUser._id.toString() });
    
    setTimeout(() => {
      senderSocket.emit("typing:start", { targetUserId: receiverUser._id.toString() });
    }, 100);
  });
  
  test("should reject unauthenticated connection", (done) => {
    const badSocket = io("http://localhost:3001", {
      auth: { token: "invalid-token" },
      transports: ["websocket"]
    });
    
    badSocket.on("connect_error", (err) => {
      expect(err.message).toBe("Authentication failed");
      badSocket.disconnect();
      done();
    });
  });
});

Debugging Common Issues

1. Messages Not Received

// Debug: Check if both sockets are in the same room
io.on("connection", (socket) => {
  socket.on("join:chat", ({ targetUserId }) => {
    const roomId = getRoomId(socket.userId, targetUserId);
    socket.join(roomId);
    console.log(`${socket.user.firstName} joined room: ${roomId}`);
    console.log("Room members:", io.sockets.adapter.rooms.get(roomId));
  });
});

Common causes:

• One socket didn't join the room
• Room ID is different for the two users (check getRoomId function)
• Socket disconnected before the message was sent
• CORS blocking the WebSocket connection

2. Duplicate Messages

// Debug: Check for duplicate listeners
useEffect(() => {
  socket.on("message:received", handler);
  return () => {
    socket.off("message:received", handler); // Must remove specific handler
  };
}, []);

Common causes:

• Not cleaning up listeners in useEffect return
• Registering the same listener multiple times
• Using socket.on without socket.off

3. Messages Out of Order

// Add sequence numbers or use createdAt for sorting
const sortedMessages = [...messages].sort(
  (a, b) => new Date(a.createdAt) - new Date(b.createdAt)
);

4. Connection Drops Frequently

// Debug: Log disconnect reasons
socket.on("disconnect", (reason) => {
  console.log("Disconnected:", reason);
  // "ping timeout"   server too slow
  // "transport close"   network issue
  // "io server disconnect"   server kicked the client
});

5. WebSocket Connection Fails in Production

Check Nginx configuration:

location /socket.io/ {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
}

The Upgrade and Connection headers are required for WebSocket.

The Takeaway

Testing chat involves: creating test users with JWT tokens, connecting Socket.io clients in tests, emitting events and asserting received events, testing typing indicators, testing authentication failures, and cleaning up after tests. Debug common issues: messages not received (check room membership), duplicate messages (clean up listeners), out of order (sort by createdAt), connection drops (log disconnect reasons), and WebSocket fails in production (check Nginx headers).