function createSuspender(DefaultComponent) {
	/** @type {(lazy: typeof Component) => void} */
	let renderLazy;
	class Suspender extends Component {
		constructor(props, context) {
			super(props, context);
			this.state = { Lazy: null };

			renderLazy = Lazy => this.setState({ Lazy });
		}

		render(props, state) {
			return state.Lazy ? h(state.Lazy, props) : h(DefaultComponent, props);
		}
	}

	sinon.spy(Suspender.prototype, 'render');

	/**
	 * @returns {Resolvers}
	 */
	function suspend() {
		const [Lazy, resolve, reject] = createLazy();
		renderLazy(Lazy);
		return [resolve, reject];
	}

	return [Suspender, suspend];
}
Returns a Component and a function (named `suspend`) that will suspend the component when called.
`suspend` will return two functions, `resolve` and `reject`. Call `resolve` with a Component the
suspended component should resume with or reject with the Error the suspended component should
reject with

@example
// 1. Create a suspender with initial children (argument to createSuspender) and render it
const [Suspender, suspend] = createSuspender(() => <div>Hello</div>);
render(
	<Suspense fallback={<div>Suspended...</div>}>
		<Suspender />
	</Suspense>,
	scratch
);
expect(scratch.innerHTML).to.eql(`div>Hello</div>`);

// 2. Cause the component to suspend and rerender the update (i.e. the fallback)
const [resolve] = suspend();
rerender();
expect(scratch.innerHTML).to.eql(`div>Suspended...</div>`);

// 3. Resolve the suspended component with a new component and rerender
return resolve(() => <div>Hello2</div>).then(() => {
	rerender();
	expect(scratch.innerHTML).to.eql(`div>Hello2</div>`);
});

@typedef {Component<{}, any>} Suspender
@typedef {[(c: ComponentType) => Promise<void>, (error: Error) => Promise<void>]} Resolvers
@param {ComponentType} DefaultComponent
@returns {[typeof Suspender, () => Resolvers]}