The MUI testing infrastructure provides comprehensive quality assurance through multiple testing layers including unit tests (Vitest), browser tests (Vitest Browser Mode), end-to-end (e2e) tests (Playwright), visual regression tests, and bundling integration tests. This system ensures code quality, cross-browser compatibility, and prevents regressions across the entire MUI ecosystem.
MUI employs a multi-tiered testing strategy that balances execution speed with environment fidelity. The infrastructure transitions from fast Node.js-based unit tests using jsdom to full browser automation.
Sources: test/README.md12-20 test/README.md161-176 test/e2e/index.test.ts41-48 test/regressions/index.jsx32-61
| Test Type | Runner | Environment | Purpose |
|---|---|---|---|
| Unit Tests | Vitest | Node.js (jsdom) | Logic, state, and basic rendering. |
| Browser Tests | Vitest | Real Browsers | DOM behavior and CSS interaction in Chrome/Firefox/Webkit. |
| E2E Tests | Playwright | Chromium | Complex user interactions (FocusTrap, Rating, Select). |
| Visual Regression | Playwright | Chromium | UI consistency and layout validation. |
Sources: test/README.md14-19 test/README.md163-175 test/e2e/index.test.ts1-5 test/regressions/index.test.js12-20
Unit tests are the primary defense against regressions in component logic. MUI uses Vitest as the runner and a specialized wrapper around @testing-library/react.
All unit tests must use the return value from @mui/internal-test-utils/createRenderer. This utility prepares the test suite environment (handling act and clock synchronization) and returns a render function compatible with Testing Library.
Sources: packages/mui-material/src/Select/Select.test.js27-28 test/README.md23-35
MUI utilizes a describeConformance utility to ensure components follow standard patterns (ref forwarding, class application, custom components).
Sources: packages/mui-material/src/Select/Select.test.js25-37
The test suite automatically fails if unexpected console.error or console.warn calls occur. Developers can explicitly assert on warnings using custom matchers:
toErrorDev(messages): Asserts that specific errors were logged in development.toWarnDev(messages): Asserts that specific warnings were logged in development.Sources: test/README.md51-87
E2E tests focus on complex interactions that require precise event orchestration, such as FocusTrap tab-looping or Select pointer flows.
The E2E system uses a renderFixture function to handle navigation and wait for component readiness. The attemptGoto function handles retries to ensure the server is fully booted before tests begin.
Sources: test/e2e/index.test.ts22-48 test/e2e/index.test.ts67-87
Visual regression tests ensure that UI changes don't introduce unintended layout shifts.
App component in test/regressions/index.jsx uses webfontloader to load Roboto and Inter. Tests wait for [data-webfontloader="active"] to be attached to the DOM.reducedMotion: 'reduce' and pins timezoneId: 'UTC'.renderFixture function in test/regressions/index.test.js uses window.muiFixture.navigate (client-side routing) which is faster than full page reloads. It also disables body overflow to prevent layout shifts during capture.[data-testid="screenshot-target"] or the primary testcase element.axe-core to record a11y violations during the visual regression pass.Sources: test/regressions/index.test.js35-69 test/regressions/index.test.js114-147 test/regressions/index.jsx93-110 test/regressions/a11y/axe.ts1-10
MUI monitors the impact of code changes on the final bundle size to prevent dependency bloat.
The system tracks sizes for individual components (e.g., @mui/material/Button) and entire packages. Snapshots are stored in size-snapshot.json files within each package.
Sources: test/bundle-size/bundle-size-checker.config.mjs1-10 test/bundle-size/package.json1-10
Refresh this wiki