JS Guide
HomeQuestionsTopicsCompaniesResources
BookmarksSearch

Built for developers preparing for JavaScript, React & TypeScript interviews.

ResourcesQuestionsSupport
HomeQuestionsSearchProgress
HomeTopicstestingIntegration Tests vs Unit Tests
PrevNext
testing
intermediate
12 min read

Integration Tests vs Unit Tests

integration-testing
msw
test-pyramid
testing-trophy
unit-testing

The difference between unit tests and integration tests, when to use each, the testing pyramid versus testing trophy, and how integration tests provide the best return on investment for most applications.

Key Points

1Unit Test Characteristics

Verify single units in isolation with mocked dependencies. Fast and focused, but can be fragile when tightly coupled to implementation details.

2Integration Test Value

Test multiple units working together with minimal mocking. More realistic and resilient to refactoring, catching bugs at component boundaries where most issues occur.

3Testing Pyramid vs Trophy

The pyramid favors many unit tests at the base. The modern trophy approach puts integration tests as the largest layer, arguing they provide the best return on investment.

4MSW for API Mocking

Mock Service Worker intercepts network requests at the service worker level, enabling realistic integration tests that work with any HTTP client.

What You'll Learn

  • Distinguish between unit tests and integration tests with concrete examples
  • Compare the testing pyramid and testing trophy approaches and justify your preference
  • Decide which test type to use based on the code being tested
  • Use MSW for realistic API mocking in integration tests

Deep Dive

Understanding the distinction between unit tests and integration tests -- and knowing when to use each -- is a fundamental testing interview topic. The industry has shifted from dogmatic adherence to the testing pyramid toward more nuanced approaches like the testing trophy, making this a rich area for discussion.

Unit Tests

Unit tests verify a single function, method, or module in complete isolation. All external dependencies (other modules, APIs, databases) are mocked or stubbed. Characteristics:

  • Fast: Execute in milliseconds with no I/O
  • Focused: Test one behavior per test case
  • Isolated: No shared state between tests
  • Fragile to refactoring: Tightly coupled to implementation details when over-mocked

Best for: pure functions, business logic calculations, utility functions, state machines, and algorithmic code.

Integration Tests

Integration tests verify that multiple units work together correctly. They exercise real interactions between components, modules, or services with minimal mocking. Characteristics:

  • Realistic: Test actual behavior users experience
  • Resilient: Survive refactoring because they test outcomes, not implementation
  • Slower: May involve rendering, DOM manipulation, or network calls
  • Higher confidence: Catch issues that unit tests miss at component boundaries

Best for: React component rendering with user interactions, API route handlers with middleware, form submissions with validation, and data flow between modules.

The Testing Pyramid

Mike Cohn's testing pyramid (2009) recommends many unit tests at the base, fewer integration tests in the middle, and very few E2E tests at the top. The rationale: unit tests are fast and cheap, so build confidence from the bottom up.

The Testing Trophy

Kent C. Dodds proposed the testing trophy as a modern alternative, arguing that integration tests provide the highest return on investment. The trophy shape (wider in the middle) reflects:

  • Static analysis (base): TypeScript, ESLint catch bugs for free
  • Unit tests (small): Only for complex isolated logic
  • Integration tests (largest): Most of your tests should live here
  • E2E tests (top): Only critical user flows

The reasoning: integration tests catch real bugs at component boundaries where most issues occur, without the brittleness of over-mocked unit tests or the slowness of E2E tests.

Practical Example

Consider a shopping cart component. A unit test might verify the calculateTotal function with mocked inputs. An integration test would render the entire cart component, simulate adding items, and verify the displayed total updates correctly. The integration test catches rendering bugs, state management issues, and event handler problems that the unit test misses.

When to Use Each

  • Unit tests: Pure functions, complex algorithms, utility libraries, code with many edge cases
  • Integration tests: Component behavior, form interactions, API integrations, data flow between modules
  • Both: Critical business logic deserves unit tests for edge cases AND integration tests for real-world behavior

API Mocking with MSW

Mock Service Worker (MSW) intercepts network requests at the service worker level, making it ideal for integration tests. Unlike mocking fetch directly, MSW works with any HTTP client and tests the full request/response cycle:

JavaScript
const server = setupServer(
  http.get('/api/users', () => HttpResponse.json([{ name: 'Alice' }]))
);

This approach keeps tests realistic while controlling external dependencies.

Fun Fact

The original testing pyramid from Mike Cohn's 2009 book 'Succeeding with Agile' did not include static analysis at all. Kent C. Dodds added it to the testing trophy because TypeScript and ESLint now catch entire categories of bugs that previously required manual tests.

Learn These First

Unit Testing Fundamentals

beginner

Mocking Functions, Modules, and APIs

intermediate

Continue Learning

Testing Strategy for Large Applications

advanced

End-to-End Testing

advanced

React Testing Library

intermediate

Practice What You Learned

What is the difference between unit tests and integration tests?
mid
integration
Unit tests test individual functions/components in isolation with mocked dependencies. Integration tests verify multiple units work together correctly, testing real interactions between components, APIs, or databases with fewer mocks.
Previous
Testing Custom React Hooks
Next
Matchers and Assertions
PrevNext