mock-getComputedStyle

A lightweight utility to mock window.getComputedStyle - the biggest slowdown in React Testing Library (RTL) tests.

Problem

When running tests with React Testing Library, calls to window.getComputedStyle can significantly slow down your test suite. This is especially noticeable in large test suites.

Solution

This package provides a simple mock implementation of window.getComputedStyle that can be used in your test environment to improve performance.

Installation

# npm
npm install --save-dev mock-getcomputedstyle
# yarn
yarn add --dev mock-getcomputedstyle
# pnpm
pnpm add -D mock-getcomputedstyle

Usage with Vitest

Add to your Vitest setup file:

// vitest.setup.ts or similar 
import 'mock-getcomputedstyle/vitest-setup';

Or configure it manually:

import { mockGetComputedStyle } from 'mock-getcomputedstyle';
// In your test setup beforeAll(() => { mockGetComputedStyle(); });
// Optional: Restore the original implementation after tests afterAll(() => { // If the package provides a restore function // restoreGetComputedStyle(); });

Performance Improvements

Using this mock can significantly reduce test execution time:

• Typical RTL test suites may see 30-70% speed improvements
• The exact improvement depends on how many components are rendered in your tests

License

MIT © Krzysztof Rzymkowski