Module 10: Testing & Debugging

Learn comprehensive testing strategies and debugging techniques for JavaScript applications.

Back to Course|5 hours|Advanced

Testing & Debugging

Learn comprehensive testing strategies and debugging techniques for JavaScript applications.

Progress: 0/4 topics completed0%

Select Topics Overview

Unit Testing with Jest

Master unit testing with Jest framework for reliable JavaScript applications

Content by: Kriyansh Khunt

MERN Stack Developer

Connect

Jest Setup & Configuration

Jest is a JavaScript testing framework that provides a complete testing solution with built-in mocking, assertions, and test runners.

Basic Test Structure

Code Example
// Basic Jest test
describe('Calculator', () => {
    test('adds 1 + 2 to equal 3', () => {
        expect(1 + 2).toBe(3);
    });
    
    test('multiplies 3 * 4 to equal 12', () => {
        expect(3 * 4).toBe(12);
    });
});
Swipe to see more code

Testing Functions

Code Example
// Function to test
function add(a, b) {
    return a + b;
}

function divide(a, b) {
    if (b === 0) throw new Error('Division by zero');
    return a / b;
}

// Tests
describe('Math Functions', () => {
    test('add function works correctly', () => {
        expect(add(2, 3)).toBe(5);
        expect(add(-1, 1)).toBe(0);
        expect(add(0, 0)).toBe(0);
    });
    
    test('divide function handles division by zero', () => {
        expect(() => divide(5, 0)).toThrow('Division by zero');
        expect(divide(10, 2)).toBe(5);
    });
});
Swipe to see more code

Mocking & Spies

Code Example
// Mock functions
const mockCallback = jest.fn();
mockCallback('test');
expect(mockCallback).toHaveBeenCalledWith('test');

// Mock modules
jest.mock('./api', () => ({
    fetchUser: jest.fn(() => Promise.resolve({ id: 1, name: 'John' }))
}));
Swipe to see more code

Async Testing

Code Example
// Testing async functions
async function fetchData() {
    const response = await fetch('/api/data');
    return response.json();
}

test('fetchData returns data', async () => {
    const data = await fetchData();
    expect(data).toBeDefined();
});
Swipe to see more code

Mini-Project: Complete Test Suite

Code Example
// UserService.js
class UserService {
    constructor(apiClient) {
        this.apiClient = apiClient;
    }
    
    async getUser(id) {
        if (!id) throw new Error('User ID is required');
        return await this.apiClient.fetchUser(id);
    }
    
    async createUser(userData) {
        if (!userData.name) throw new Error('Name is required');
        return await this.apiClient.createUser(userData);
    }
}

// UserService.test.js
describe('UserService', () => {
    let userService;
    let mockApiClient;
    
    beforeEach(() => {
        mockApiClient = {
            fetchUser: jest.fn(),
            createUser: jest.fn()
        };
        userService = new UserService(mockApiClient);
    });
    
    describe('getUser', () => {
        test('should fetch user successfully', async () => {
            const mockUser = { id: 1, name: 'John' };
            mockApiClient.fetchUser.mockResolvedValue(mockUser);
            
            const result = await userService.getUser(1);
            
            expect(mockApiClient.fetchUser).toHaveBeenCalledWith(1);
            expect(result).toEqual(mockUser);
        });
        
        test('should throw error for invalid ID', async () => {
            await expect(userService.getUser(null)).rejects.toThrow('User ID is required');
        });
    });
});
Swipe to see more code

🎯 Practice Exercise

Test your understanding of this topic:

Previous Module

Module 9: Advanced JavaScript Concepts

Next Module

Module 11: Build Tools & Development

Additional Resources

📚 Recommended Reading

  • •Jest Testing Framework Guide
  • •JavaScript Debugging Techniques
  • •Code Quality Best Practices
  • •Performance Monitoring Guide

🌐 Online Resources

  • •Jest Documentation
  • •Chrome DevTools Guide
  • •ESLint Configuration
  • •Web Performance Best Practices

Ready for the Next Module?

Continue your learning journey and master the next set of concepts.

Continue to Module 11