Docs: Add datasource picker virtualization migration guide

docusaurus/docs/migration-guides/update-from-grafana-versions/v12.x-v13.x.md

@@ -11,6 +11,8 @@ keywords:
   - migration
   - react 19
   - ui-extensions
+  - datasource picker
+  - test-utils
 ---
 
 # Migrate plugins from Grafana version 12.x to 13.x
@@ -332,3 +334,63 @@ export const plugin = new AppPlugin().addLink({
 :::note
 The `category` property still works but will be removed in a future version of Grafana. Update your plugins to use `group` to ensure forward compatibility.
 :::
+
+## Datasource picker is now virtualized
+
+The datasource picker in Grafana 13 now uses a virtualized list to improve performance. Instead of rendering every item in the list at once, only the items visible in the viewport are rendered. This reduces memory usage and improves responsiveness, especially for instances with many datasources.
+
+### Impact on unit and integration tests
+
+If your plugin has unit or integration tests (Jest or Vitest) that render the datasource picker, they may fail after upgrading to Grafana 13. The virtualized list relies on `getBoundingClientRect` to calculate which items are visible, but JSDOM doesn't provide meaningful bounding rect values. Without a non-zero container size, the virtualizer renders no items.
+
+### Migrate your unit and integration tests
+
+Add `mockBoundingClientRect()` from `@grafana/test-utils` in a `beforeAll` hook. This provides sensible default dimensions so the virtualizer can calculate visible items.
+
+```typescript
+import { mockBoundingClientRect } from '@grafana/test-utils';
+
+describe('MyComponent', () => {
+  beforeAll(() => {
+    mockBoundingClientRect();
+  });
+
+  // existing tests...
+});
+```
+
+If your tests already have a manual `getBoundingClientRect` mock, replace it with the standard utility:
+
+```diff
++ import { mockBoundingClientRect } from '@grafana/test-utils';
+
+  describe('MyComponent', () => {
+    beforeAll(() => {
+-     const mockGetBoundingClientRect = jest.fn(() => ({
+-       width: 120,
+-       height: 120,
+-       top: 0,
+-       left: 0,
+-       bottom: 0,
+-       right: 0,
+-     }));
+-
+-     Object.defineProperty(Element.prototype, 'getBoundingClientRect', {
+-       value: mockGetBoundingClientRect,
+-     });
++     mockBoundingClientRect();
+    });
+
+    // existing tests...
+  });
+```
+
+### Impact on end-to-end tests
+
+If your end-to-end tests interact with the datasource picker directly, they may break after upgrading to Grafana 13. Use [`@grafana/plugin-e2e`](../../e2e-test-a-plugin/index.md) which provides a `datasource.set()` method that abstracts the picker interaction and works across Grafana versions.
+
+```typescript
+await panelEditPage.datasource.set('My Data Source');
+```
+
+Refer to the [end-to-end testing documentation](../../e2e-test-a-plugin/test-a-data-source-plugin/query-editor.md) for more examples.