Webpack Test Suite Structure

This document explains the structure of the test/ directory in the Webpack project using Jest. The directory is organized into multiple folders and files, each serving a specific purpose in testing various aspects of Webpack’s functionality.

Folder and File Breakdown

1. __snapshots__/

• Purpose: Stores Jest snapshot files for comparing output consistency over time.
• Usage: Used for testing UI components, serialized data, or expected module outputs.

2. benchmarkCases/

• Purpose: Contains test cases for benchmarking Webpack's performance.
• Usage: Measures build times, memory usage, and optimization impact.

3. cases/

• Purpose: General test cases covering core functionalities.
• Usage: Includes unit and integration tests for various modules and features.

4. configCases/

• Purpose: Tests related to Webpack configurations.
• Usage: Ensures that Webpack’s configuration (e.g., loaders, plugins) functions correctly.

5. fixtures/

• Purpose: Stores sample/mock data used in tests.
• Usage: Helps in creating consistent test cases with predefined inputs.

6. helpers/

• Purpose: Utility functions and scripts to assist in testing.
• Usage: Provides reusable functions for mock data generation, cleanup, and assertions.

7. hotCases/

• Purpose: Focuses on Webpack’s Hot Module Replacement (HMR) functionality.
• Usage: Ensures live reloading and hot updates work correctly.

8. hotPlayground/

• Purpose: An experimental space for testing HMR features.
• Usage: Allows exploration of new HMR implementations.

9. memoryLimitCases/json

• Purpose: Contains test cases related to memory limits.
• Usage: Ensures Webpack doesn’t exceed memory constraints.

10. statsCases/

• Purpose: Tests focused on Webpack’s statistical outputs.
• Usage: Verifies correct bundle sizes, dependencies, and optimizations.

11. typesCases/

• Purpose: Type-checking tests, likely for TypeScript integration.
• Usage: Ensures proper type definitions and compliance.

12. test262-cases/

• Purpose: ECMAScript test262 conformance test cases.
• Usage: Git submodule — initialize with git submodule update --init test/test262-cases. Test runner: test/test262.spectest.js.

13. watchCases/

• Purpose: Tests for Webpack’s watch mode functionality.
• Usage: Ensures file changes trigger correct rebuild behavior.

14. *.unittest.js

• Purpose: Contains unit tests for various functionalities.
• Usage: Ensures individual modules and functions work as expected.

15. BannerPlugin.test.js

• Purpose: Tests Webpack’s BannerPlugin functionality.
• Usage: Ensures that the plugin correctly adds banners to the bundled files.

Example Test Case Structure

Many Webpack tests simulate small projects that are compiled during the test run.

For example, a configuration test may look like:

test/configCases/entry/simple/ index.js webpack.config.js expected.txt

Explanation:

• index.js – entry file for the test project
• webpack.config.js – configuration used by webpack
• expected.txt – expected output or snapshot comparison

During the test run, webpack compiles this project and compares the result with the expected output to ensure behavior remains consistent.

Testing Framework

• Jest is used for running tests.
• Snapshots help maintain consistency in output.
• Unit tests verify individual module functionality.
• Integration tests ensure multiple components work together.

How to Run Tests

To execute all tests:

yarn test

Choose test command based on modified directory:

Running a single test case with --testNamePattern. The test name format is <category> <case-name> (e.g., css basic, asset url):

yarn test:basic -- --testPathPatterns="ConfigTestCases" --testNamePattern="css basic"

Multiple patterns can be combined with |:

yarn test:basic -- --testPathPatterns="ConfigTestCases" --testNamePattern="css basic|css url"

Contribution Guide

• Add new test cases in the appropriate folder.
• Use Jest assertions and mocks for consistency.
• Run yarn test before pushing changes to validate functionality.