Pattern isolation techniques in unit testing

Pattern Isolation Techniques in Unit Testing

The core goal of unit testing is to verify whether the smallest testable unit of code works as expected. Pattern isolation is particularly important in unit testing, as it ensures the purity of tests and prevents external dependencies and side effects from interfering with test results. JavaScript design patterns offer various technical means to achieve isolation.

Mock Objects

Mock objects are one of the most commonly used isolation techniques in unit testing. They create stand-ins for real objects to simulate their behavior, thereby isolating the code under test from external dependencies.

// Real service class
class UserService {
  fetchUser(id) {
    // Would actually make an HTTP request
    return fetch(`/users/${id}`);
  }
}

// Using mock objects in tests
const mockUserService = {
  fetchUser: jest.fn().mockResolvedValue({ id: 1, name: 'Mock User' })
};

test('should get user name', async () => {
  const userName = await getUserName(1, mockUserService);
  expect(userName).toBe('Mock User');
});

Key points about mock objects:

1. Complete control over mock object behavior
2. Ability to preset return values or throw exceptions
3. Capability to verify interaction behavior

Dependency Injection

Dependency injection is a fundamental technique for achieving pattern isolation. By passing dependencies as parameters rather than creating them internally, they can be easily replaced with test doubles.

// Not recommended - tight coupling
class OrderProcessor {
  constructor() {
    this.paymentService = new PaymentService();
  }
}

// Recommended approach - dependency injection
class OrderProcessor {
  constructor(paymentService) {
    this.paymentService = paymentService;
  }
}

// Can inject mock objects in tests
const mockPaymentService = { process: jest.fn() };
const processor = new OrderProcessor(mockPaymentService);

Advantages of dependency injection:

1. Improves code testability
2. Reduces coupling between modules
3. Facilitates implementation of different environment configurations

Test Stubs

Test stubs are another isolation technique that provides predefined responses to replace real component functionality. Unlike mock objects, stubs typically don't verify interactions.

// Database access layer stub
const dbStub = {
  query: (sql) => {
    const cannedResponses = {
      'SELECT * FROM users': [{ id: 1, name: 'Test User' }],
      'SELECT * FROM products': [{ id: 101, name: 'Test Product' }]
    };
    return Promise.resolve(cannedResponses[sql] || []);
  }
};

test('should return user data', async () => {
  const user = await getUser(1, dbStub);
  expect(user.name).toBe('Test User');
});

Characteristics of test stubs:

1. Simplifies behavior of complex dependencies
2. Provides deterministic responses
3. Doesn't care about calling methods or counts

Component Isolation

For frontend component testing, isolation techniques are particularly important. Modern frontend frameworks provide various tools to achieve component isolation.

React component testing example:

// Component under test
function UserProfile({ userId, userService }) {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    userService.fetchUser(userId).then(setUser);
  }, [userId, userService]);

  return user ? <div>{user.name}</div> : <div>Loading...</div>;
}

// Test case
test('renders user name', async () => {
  const mockService = {
    fetchUser: jest.fn().mockResolvedValue({ name: 'Test User' })
  };
  
  render(<UserProfile userId="1" userService={mockService} />);
  
  await waitFor(() => {
    expect(screen.getByText('Test User')).toBeInTheDocument();
  });
});

Key aspects of component isolation:

1. Mock all external dependencies
2. Control component inputs (props)
3. Verify rendered output

Event Simulation

Testing user interactions requires simulating browser events, which is also an important technique for isolating real environments.

// Testing click event handling
test('button click triggers action', () => {
  const handleClick = jest.fn();
  render(<button onClick={handleClick}>Click me</button>);
  
  fireEvent.click(screen.getByText('Click me'));
  expect(handleClick).toHaveBeenCalledTimes(1);
});

// Testing form input
test('input change updates state', () => {
  const { container } = render(<input type="text" />);
  const input = container.querySelector('input');
  
  fireEvent.change(input, { target: { value: 'test value' } });
  expect(input.value).toBe('test value');
});

Key points about event simulation:

1. Use standardized mock event APIs
2. Verify event handling logic
3. Simulate complete event objects

Time Control

Testing time-related logic involving timers, animations, etc., requires special time isolation techniques.

// Function under test
function debounce(func, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

// Using Jest's timer mocks
test('debounce delays function call', () => {
  jest.useFakeTimers();
  const mockFn = jest.fn();
  const debounced = debounce(mockFn, 1000);
  
  debounced();
  expect(mockFn).not.toBeCalled();
  
  jest.advanceTimersByTime(500);
  expect(mockFn).not.toBeCalled();
  
  jest.advanceTimersByTime(500);
  expect(mockFn).toBeCalledTimes(1);
  
  jest.useRealTimers();
});

Time control techniques:

1. Replace system timers
2. Manually advance virtual time
3. Test asynchronous timing logic

Network Request Isolation

Isolating real network requests is a crucial aspect of frontend testing, typically using request interception techniques.

// Using fetch-mock library
import fetchMock from 'fetch-mock';

test('fetches user data', async () => {
  fetchMock.get('/api/user/1', { name: 'Mock User' });
  
  const user = await fetchUser(1);
  expect(user.name).toBe('Mock User');
  
  fetchMock.restore();
});

// Using MSW (Mock Service Worker)
import { setupWorker, rest } from 'msw';

const worker = setupWorker(
  rest.get('/api/user/:id', (req, res, ctx) => {
    return res(ctx.json({ name: 'MSW User' }));
  })
);

beforeAll(() => worker.start());
afterEach(() => worker.resetHandlers());
afterAll(() => worker.stop());

Network isolation methods:

1. Intercept specific API requests
2. Return preset responses
3. Verify request parameters

State Isolation

State isolation in testing ensures each test case has an independent, clean initial state.

// Global state can lead to test pollution
let counter = 0;

// Better approach - encapsulate state
function createCounter() {
  let value = 0;
  return {
    increment: () => ++value,
    getValue: () => value
  };
}

test('counter increments independently', () => {
  const counter1 = createCounter();
  const counter2 = createCounter();
  
  counter1.increment();
  expect(counter1.getValue()).toBe(1);
  expect(counter2.getValue()).toBe(0);
});

Principles of state isolation:

1. Avoid shared mutable state
2. Create new instances for each test
3. Use factory functions to generate independent states

Module Rewiring

Module rewiring is useful when needing to replace internal module implementations.

// userModule.js
let dbConnection = require('./realDb');

function getUser(id) {
  return dbConnection.query('SELECT * FROM users WHERE id = ?', [id]);
}

// Rewriting internal dependencies in tests
jest.mock('./realDb', () => ({
  query: jest.fn().mockResolvedValue({ id: 1, name: 'Mock User' })
}));

test('gets user from mock db', async () => {
  const user = await getUser(1);
  expect(user.name).toBe('Mock User');
});

Module rewiring techniques:

1. Replace module's local dependencies
2. Maintain original interfaces
3. Don't affect other test cases

Test Data Builders

Constructing test-specific data objects can isolate tests from coupling with production data structures.

class UserBuilder {
  constructor() {
    this.user = {
      id: 1,
      name: 'Default User',
      email: 'user@example.com',
      active: true
    };
  }
  
  withId(id) {
    this.user.id = id;
    return this;
  }
  
  withName(name) {
    this.user.name = name;
    return this;
  }
  
  inactive() {
    this.user.active = false;
    return this;
  }
  
  build() {
    return this.user;
  }
}

// Usage in tests
test('inactive user cannot login', () => {
  const user = new UserBuilder().inactive().build();
  expect(canLogin(user)).toBe(false);
});

Advantages of data builders:

1. Provides meaningful default values
2. Simplifies test data creation with chained calls
3. Centralizes test data structure management

Test Hooks

Test framework-provided hook functions are important tools for achieving isolation.

describe('UserService', () => {
  let userService;
  let mockDb;
  
  beforeEach(() => {
    mockDb = {
      query: jest.fn().mockResolvedValue([])
    };
    userService = new UserService(mockDb);
  });
  
  afterEach(() => {
    jest.clearAllMocks();
  });
  
  test('queries db when fetching users', async () => {
    await userService.getAllUsers();
    expect(mockDb.query).toHaveBeenCalledWith('SELECT * FROM users');
  });
});

Key points about hook functions:

1. beforeEach/afterEach for test setup and cleanup
2. beforeAll/afterAll for one-time setup
3. Ensure tests don't interfere with each other

Test Configuration Isolation

Different tests may require different configuration environments, and isolated configurations can prevent conflicts.

// Using environment variables for isolation
function getApiBaseUrl() {
  return process.env.NODE_ENV === 'test' 
    ? 'http://test.api.example.com'
    : 'http://api.example.com';
}

// Using configuration objects for isolation
const testConfig = {
  api: {
    baseUrl: 'http://test.api.example.com',
    timeout: 500
  }
};

const productionConfig = {
  api: {
    baseUrl: 'http://api.example.com',
    timeout: 5000
  }
};

function createApiClient(config) {
  return {
    get: (path) => fetch(`${config.api.baseUrl}${path}`)
  };
}

Configuration isolation methods:

1. Differentiate with environment variables
2. Inject different configuration objects
3. Use factory functions to create instances

Side Effect Isolation

Pure functions are easy to test, but real-world code often has side effects that need proper isolation.

// Function with side effects
function logError(error) {
  console.error(error);
  sendToErrorTrackingService(error);
}

// Test version
function createErrorLogger({ console, trackingService }) {
  return function logError(error) {
    console.error(error);
    trackingService.send(error);
  };
}

// Test case
test('error is logged and tracked', () => {
  const mockConsole = { error: jest.fn() };
  const mockTracker = { send: jest.fn() };
  const logError = createErrorLogger({
    console: mockConsole,
    trackingService: mockTracker
  });
  
  const error = new Error('Test error');
  logError(error);
  
  expect(mockConsole.error).toBeCalledWith(error);
  expect(mockTracker.send).toBeCalledWith(error);
});

Side effect handling strategies:

1. Abstract side effect dependencies as parameters
2. Use adapter pattern to wrap native APIs
3. Centralize side effect operations

Test Pyramid Application

Reasonable test layering is itself an isolation strategy, with different levels focusing on different testing aspects.

Unit testing focuses on:

1. Behavior of single functions or classes
2. Isolation of all external dependencies
3. Fast execution and feedback

Integration testing focuses on:

1. Interactions between modules
2. Partial real dependencies
3. Validating interface contracts

End-to-end testing focuses on:

1. Complete user flows
2. Real environments and data
3. Overall system behavior

// Unit test example - complete isolation
test('formatter formats date correctly', () => {
  const result = formatDate('2023-01-01', 'YYYY/MM/DD');
  expect(result).toBe('2023/01/01');
});

// Integration test example - partial real dependencies
test('order processing workflow', async () => {
  const db = createTestDatabase(); // Test-specific database
  const paymentService = new MockPaymentService();
  const orderService = new OrderService(db, paymentService);
  
  const order = await orderService.createOrder(testOrder);
  expect(order.status).toBe('paid');
});

// End-to-end test example - real environment
test('user can complete checkout', async () => {
  await page.goto('/products');
  await page.click('.add-to-cart');
  await page.click('.checkout-button');
  await page.fill('#credit-card', '4242424242424242');
  await page.click('#submit-payment');
  await expect(page).toHaveText('Order complete');
});