Skip to content

TESTING_DOCS.md

Latest commit

 

History

History
145 lines (93 loc) · 5.38 KB

TESTING_DOCS.md

File metadata and controls

145 lines (93 loc) · 5.38 KB

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:

Modified directory/file Command
test/*.unittest.js yarn test:base -- --testPathPatterns="<filename>"
test/cases/ yarn test:basic
test/configCases/ yarn test:basic -- --testPathPatterns="ConfigTestCases"
test/statsCases/ yarn test:basic -- --testPathPatterns="StatsTestCases"
test/watchCases/ yarn test:base -- --testPathPatterns="WatchTestCases"
test/hotCases/ yarn test:base -- --testPathPatterns="HotTestCases"
test/benchmarkCases/ FILTER="<case-name>" yarn benchmark
test/test262-cases/ yarn test:test262 (requires git submodule update --init test/test262-cases first)

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.