Back to Repositories

Testing useRef Hook Reference Stability in Preact

This test suite validates the useRef hook functionality in Preact, focusing on reference stability and initialization behavior. It ensures the hook maintains proper state management and reference persistence across component renders.

Test Coverage Overview

The test suite provides comprehensive coverage of the useRef hook’s core functionality.

Tests reference stability across multiple renders
Verifies default initialization behavior
Validates mutable reference updates
Covers edge cases like undefined initial values

Implementation Analysis

The testing approach utilizes Jest’s describe/it pattern with Preact’s render function to validate hook behavior. The implementation leverages component rendering cycles to verify reference persistence and mutation.

Uses setupScratch and teardown helpers for DOM manipulation
Implements component re-rendering to verify state preservation
Employs array-based value tracking for verification

Technical Details

Testing Framework: Jest
Component Library: Preact
Test Utilities: Custom scratch setup/teardown helpers
DOM Environment: jsdom
Assertion Library: Chai (expect)

Best Practices Demonstrated

The test suite exemplifies clean testing practices with proper setup and teardown phases, isolated test cases, and clear assertions.

Proper test environment cleanup between cases
Isolated component testing
Clear test case descriptions
Effective use of beforeEach/afterEach hooks

preactjs/preact

hooks/test/browser/useRef.test.js

            
import { createElement, render } from 'preact';
import { setupScratch, teardown } from '../../../test/_util/helpers';
import { useRef } from 'preact/hooks';

/** @jsx createElement */

describe('useRef', () => {
	/** @type {HTMLDivElement} */
	let scratch;

	beforeEach(() => {
		scratch = setupScratch();
	});

	afterEach(() => {
		teardown(scratch);
	});

	it('provides a stable reference', () => {
		const values = [];

		function Comp() {
			const ref = useRef(1);
			values.push(ref.current);
			ref.current = 2;
			return null;
		}

		render(<Comp />, scratch);
		render(<Comp />, scratch);

		expect(values).to.deep.equal([1, 2]);
	});

	it('defaults to undefined', () => {
		const values = [];

		function Comp() {
			const ref = useRef();
			values.push(ref.current);
			ref.current = 2;
			return null;
		}

		render(<Comp />, scratch);
		render(<Comp />, scratch);

		expect(values).to.deep.equal([undefined, 2]);
	});
});