Back to Repositories

Validating Compatibility Layer Exports in Preact

This test suite validates the exports and functionality of Preact’s compatibility layer, ensuring proper implementation of React-like APIs and hooks. It verifies both default and named exports from preact/compat and preact/compat/client modules.

Test Coverage Overview

The test suite provides comprehensive coverage of Preact’s compatibility layer exports.

Key areas tested include:

Core component APIs (createElement, Component, Fragment)
React Hook implementations (useState, useEffect, etc.)
Client-specific functionality (createRoot, hydrateRoot)
Suspense and lazy loading capabilities
Compat-specific utilities (PureComponent, Children API)

Implementation Analysis

The testing approach uses Jest’s describe/it blocks to organize test cases logically. Tests verify both default and named exports through type checking and existence validation.

The implementation leverages Chai-style assertions (expect().to.be.a()) to verify function types and object existence, ensuring API compatibility with React’s interface.

Technical Details

Testing tools and configuration:

Jest test framework
Chai-style assertions
ES6 import/export syntax
Module-level testing structure
Function type verification

Best Practices Demonstrated

The test suite exemplifies strong testing practices through organized test structure and thorough API validation.

Notable practices include:

Systematic API surface verification
Separate client and general export testing
Consistent assertion patterns
Comprehensive hook testing coverage

preactjs/preact

compat/test/browser/exports.test.js

            
import Compat from 'preact/compat';
import CompatClient from 'preact/compat/client';
// eslint-disable-next-line no-duplicate-imports
import * as Named from 'preact/compat';
// eslint-disable-next-line no-duplicate-imports
import * as NamedClient from 'preact/compat/client';

describe('compat exports', () => {
	describe('client', () => {
		it('should have a default export', () => {
			expect(CompatClient.createRoot).to.be.a('function');
			expect(CompatClient.hydrateRoot).to.be.a('function');
		});

		it('should have named exports', () => {
			expect(NamedClient.createRoot).to.be.a('function');
			expect(NamedClient.hydrateRoot).to.be.a('function');
		});
	});

	it('should have a default export', () => {
		expect(Compat.createElement).to.be.a('function');
		expect(Compat.Component).to.be.a('function');
		expect(Compat.Fragment).to.exist;
		expect(Compat.render).to.be.a('function');
		expect(Compat.hydrate).to.be.a('function');
		expect(Compat.cloneElement).to.be.a('function');
		expect(Compat.createContext).to.be.a('function');
		expect(Compat.createRef).to.be.a('function');

		// Hooks
		expect(Compat.useState).to.be.a('function');
		expect(Compat.useReducer).to.be.a('function');
		expect(Compat.useEffect).to.be.a('function');
		expect(Compat.useLayoutEffect).to.be.a('function');
		expect(Compat.useRef).to.be.a('function');
		expect(Compat.useMemo).to.be.a('function');
		expect(Compat.useCallback).to.be.a('function');
		expect(Compat.useContext).to.be.a('function');
		expect(Compat.useSyncExternalStore).to.be.a('function');
		expect(Compat.useInsertionEffect).to.be.a('function');
		expect(Compat.useTransition).to.be.a('function');
		expect(Compat.useDeferredValue).to.be.a('function');

		// Suspense
		expect(Compat.Suspense).to.be.a('function');
		expect(Compat.lazy).to.be.a('function');

		// Compat specific
		expect(Compat.PureComponent).to.exist.and.be.a('function');
		expect(Compat.createPortal).to.exist.and.be.a('function');
		expect(Compat.createFactory).to.exist.and.be.a('function');
		expect(Compat.isValidElement).to.exist.and.be.a('function');
		expect(Compat.findDOMNode).to.exist.and.be.a('function');
		expect(Compat.Children.map).to.exist.and.be.a('function');
		expect(Compat.Children.forEach).to.exist.and.be.a('function');
		expect(Compat.Children.count).to.exist.and.be.a('function');
		expect(Compat.Children.toArray).to.exist.and.be.a('function');
		expect(Compat.Children.only).to.exist.and.be.a('function');
		expect(Compat.unmountComponentAtNode).to.exist.and.be.a('function');
		expect(Compat.unstable_batchedUpdates).to.exist.and.be.a('function');
		expect(Compat.version).to.exist.and.be.a('string');
		expect(Compat.startTransition).to.be.a('function');
	});

	it('should have named exports', () => {
		expect(Named.createElement).to.be.a('function');
		expect(Named.Component).to.be.a('function');
		expect(Named.Fragment).to.exist;
		expect(Named.render).to.be.a('function');
		expect(Named.hydrate).to.be.a('function');
		expect(Named.cloneElement).to.be.a('function');
		expect(Named.createContext).to.be.a('function');
		expect(Named.createRef).to.be.a('function');

		// Hooks
		expect(Named.useState).to.be.a('function');
		expect(Named.useReducer).to.be.a('function');
		expect(Named.useEffect).to.be.a('function');
		expect(Named.useLayoutEffect).to.be.a('function');
		expect(Named.useRef).to.be.a('function');
		expect(Named.useMemo).to.be.a('function');
		expect(Named.useCallback).to.be.a('function');
		expect(Named.useContext).to.be.a('function');

		// Suspense
		expect(Named.Suspense).to.be.a('function');
		expect(Named.lazy).to.be.a('function');

		// Compat specific
		expect(Named.PureComponent).to.exist.and.be.a('function');
		expect(Named.createPortal).to.exist.and.be.a('function');
		expect(Named.createFactory).to.exist.and.be.a('function');
		expect(Named.isValidElement).to.exist.and.be.a('function');
		expect(Named.findDOMNode).to.exist.and.be.a('function');
		expect(Named.Children.map).to.exist.and.be.a('function');
		expect(Named.Children.forEach).to.exist.and.be.a('function');
		expect(Named.Children.count).to.exist.and.be.a('function');
		expect(Named.Children.toArray).to.exist.and.be.a('function');
		expect(Named.Children.only).to.exist.and.be.a('function');
		expect(Named.unmountComponentAtNode).to.exist.and.be.a('function');
		expect(Named.unstable_batchedUpdates).to.exist.and.be.a('function');
		expect(Named.version).to.exist.and.be.a('string');
	});
});