JS Guide
HomeQuestionsTopicsCompaniesResources
BookmarksSearch

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

ResourcesQuestionsSupport
HomeQuestionsSearchProgress
HomeQuestionstesting
Prev

Learn the concept

Test Organization and Structure

testing
junior
structure

How should you structure and organize test files?

test-structure
organization
naming
describe
best-practices
Quick Answer

Tests can be organized either alongside source files (Component.test.js) or in a separate __tests__ directory. Use describe blocks to group related tests, clear test names that describe behavior, and follow the Given-When-Then or AAA pattern for clarity.

Detailed Explanation

File Organization:

  1. Co-located tests:

    • Component.js + Component.test.js
    • Easy to find related tests
    • Preferred for component testing
  2. Separate directory:

    • src/ and __tests__/
    • Mirrors source structure
    • Cleaner source folders

Naming Conventions:

  • *.test.js or *.spec.js
  • Descriptive test names
  • Use 'should' or 'when...then' patterns

Test Structure:

  • describe: Group related tests
  • test or it: Individual test cases
  • Nest describe blocks for sub-features

Code Examples

Test file organizationJavaScript
// Co-located structure
// src/
//   components/
//     Button/
//       Button.jsx
//       Button.test.jsx
//       Button.module.css
//   utils/
//     format.js
//     format.test.js

// Separate __tests__ structure
// src/
//   components/
//     Button.jsx
//   utils/
//     format.js
// __tests__/
//   components/
//     Button.test.jsx
//   utils/
//     format.test.js

// Jest config for finding tests
module.exports = {
  testMatch: [
    '**/__tests__/**/*.[jt]s?(x)',
    '**/?(*.)+(spec|test).[jt]s?(x)'
  ]
};

Real-World Applications

Use Cases

Organizing tests for a large-scale React application with hundreds of components and utility functions

Adopting a co-located test structure (`Component.test.jsx` next to `Component.jsx`) to make it easy for developers to find, understand, and maintain tests alongside the code they test, enhancing module cohesion.

Managing tests for a backend API service with multiple endpoints and business logic modules

Using a separate `__tests__` directory that mirrors the source directory structure (`src/controllers/users.js` -> `__tests__/controllers/users.test.js`) to keep test files distinct from production code while maintaining clear mapping.

Implementing a new feature with multiple related functionalities that require various test cases

Employing nested `describe` blocks to logically group tests (e.g., `describe('User Management', () => { describe('createUser', ...), describe('deleteUser', ...) })`), improving test readability and allowing granular execution of specific test suites.

Mini Projects

Test Structure Refactoring

intermediate

Take a project with disorganized tests and refactor its test file structure and naming conventions to follow best practices (co-located or `__tests__` folder) and use descriptive `describe`/`test` blocks.

Mock API with Nested Tests

intermediate

Create a mock API with several endpoints. Write tests for each endpoint, organizing them into nested `describe` blocks to clearly separate tests for different functionalities.

Industry Examples

Meta (Facebook)

As the creator of Jest and a pioneer in large-scale JavaScript development, Meta's internal projects heavily utilize well-structured test files, often co-located with components, to manage their vast and rapidly evolving codebase, ensuring developer productivity and code quality.

Spotify

Spotify's web applications and microservices, which often involve complex features, benefit from structured test files. Clear organization and descriptive test names are crucial for their distributed teams to understand and contribute to various parts of the system efficiently.

Resources

Jest - Getting Started

docs

Related Questions

What is unit testing and why is it important?

junior
basics

What are the most commonly used Jest matchers?

junior
jest
Previous
How do you test asynchronous code in Jest?
Prev