Adjust useAsyncValue typings

src/hooks/useAsyncValue.ts

@@ -40,10 +40,24 @@ import { useAsyncCallback, type AsyncCallbackState } from './useAsyncCallback';
 export const useAsyncValue = <A extends Array<unknown>, R>(
 	callback: ( ...args: Array<A> ) => Promise<R>,
 	deps: DependencyList
-): AsyncCallbackState<R> => {
+): AsyncCallbackHookResult<R> => {
 	const [ asyncCallback, asyncState ] = useAsyncCallback( callback );
 
 	useInstantEffect( asyncCallback, deps );
 
+	// There might be short delay between the effect and the state update.
+	// So it is possible that the status is still 'idle' after the effect.
+	// In such case, we should return 'loading' status because the effect is already queued to be executed.
+	if ( asyncState.status === 'idle' ) {
+		return {
+			status: 'loading'
+		};
+	}
+
 	return asyncState;
 };
+
+/**
+ * The result of the `useAsyncValue` hook.
+ */
+type AsyncCallbackHookResult<R> = Exclude<AsyncCallbackState<R>, { status: 'idle' }>;

tests/cloud/withCKEditorCloud.test.tsx

@@ -75,7 +75,7 @@ describe( 'withCKEditorCloud', () => {
 		deferredPlugin.resolve( 123 );
 
 		expect( await findByText( 'Your Editor 1' ) ).toBeVisible();
-		expect( lastRenderedMockProps.current?.cloud.CKPlugins?.Plugin ).toBe( 123 );
+		expect( lastRenderedMockProps.current?.cloud.loadedPlugins?.Plugin ).toBe( 123 );
 	} );
 
 	it( 'should show error message when cloud loading fails', async () => {

tsconfig.json

@@ -10,7 +10,8 @@
       "DOM.Iterable"
     ],
     "types": [
-      "./vite-env.d.ts"
+      "./vite-env.d.ts",
+	  "@testing-library/jest-dom/vitest"
     ],
     "skipLibCheck": true,
     "jsx": "react",