Merge pull request #4807 from easyops-cn/williamcai/brick-kit/BrickAsComponent/dispatch_mount_event_after_element_of_template_brick_is_assigned

fix(BrickAsComponent): dispatch mount event after element of template…

Author: weareoutman

packages/brick-kit/src/BrickAsComponent.spec.tsx

@@ -789,6 +789,7 @@ describe("BrickAsComponent", () => {
     const wrapper = mount(<BrickAsComponent useBrick={useBrick} />);
 
     await (global as any).flushPromises();
+    jest.runAllTimers();
     onMountHandlers.map((handler) => {
       expect(spiedListenerFactory).toBeCalledWith(
         handler,

packages/brick-kit/src/BrickAsComponent.tsx

@@ -405,11 +405,14 @@ export function SingleBrickAsComponentFactory(React: typeof _React) {
 
           const onMount = useBrick.lifeCycle?.onMount;
           if (onMount) {
-            dispatchLifeCycleEvent(
-              new CustomEvent("mount"),
-              transformEvents(data, { onMount }).onMount,
-              brick
-            );
+            // wait for element of template brick to be assigned
+            queueMicrotask(() => {
+              dispatchLifeCycleEvent(
+                new CustomEvent("mount"),
+                transformEvents(data, { onMount }).onMount,
+                brick
+              );
+            });
           }
 
           const onScrollIntoView = useBrick.lifeCycle?.onScrollIntoView;