Back to Repositories

Testing findDOMNode Component Behavior in PreactJS

This test suite validates the findDOMNode functionality in Preact’s React compatibility layer, ensuring proper DOM node retrieval and null handling. The tests verify the behavior matches React’s implementation for various component rendering scenarios.

Test Coverage Overview

The test suite provides comprehensive coverage of findDOMNode behavior across different scenarios:

Null input handling
Regular DOM element processing
Component rendering with null/false returns
DOM Node type verification

Implementation Analysis

The testing approach uses Jest’s describe/it pattern with setup and teardown hooks for consistent test environment management. The implementation specifically compares Preact’s behavior with React’s expected behavior, noting key differences in handling null/false render returns.

Technical Details

Testing infrastructure includes:

Jest test framework
Custom helper utilities (setupScratch, teardown)
React.Component class extension
DOM manipulation utilities
Node type checking

Best Practices Demonstrated

The test suite exemplifies several testing best practices:

Isolated test environment setup/teardown
Clear test case descriptions
Edge case handling
Explicit comparison with React behavior
Comprehensive component lifecycle testing

preactjs/preact

compat/test/browser/findDOMNode.test.js

            
import React, { createElement, findDOMNode } from 'preact/compat';
import { setupScratch, teardown } from '../../../test/_util/helpers';

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

	class Helper extends React.Component {
		render({ something }) {
			if (something == null) return null;
			if (something === false) return null;
			return <div />;
		}
	}

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

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

	it.skip('should return DOM Node if render is not false nor null', () => {
		const helper = React.render(<Helper />, scratch);
		expect(findDOMNode(helper)).to.be.instanceof(Node);
	});

	it('should return null if given null', () => {
		expect(findDOMNode(null)).to.be.null;
	});

	it('should return a regular DOM Element if given a regular DOM Element', () => {
		let scratch = document.createElement('div');
		expect(findDOMNode(scratch)).to.equalNode(scratch);
	});

	// NOTE: React.render() returning false or null has the component pointing
	// 			to no DOM Node, in contrast, Preact always render an empty Text DOM Node.
	it('should return null if render returns false', () => {
		const helper = React.render(<Helper something={false} />, scratch);
		expect(findDOMNode(helper)).to.be.null;
	});

	// NOTE: React.render() returning false or null has the component pointing
	// 			to no DOM Node, in contrast, Preact always render an empty Text DOM Node.
	it('should return null if render returns null', () => {
		const helper = React.render(<Helper something={null} />, scratch);
		expect(findDOMNode(helper)).to.be.null;
	});
});