@hubspot/ui-extensions 0.11.0 → 0.11.2

package/dist/__tests__/crm/utils/fetchCrmProperties.spec.js

@@ -1,5 +1,6 @@
+import { vi } from 'vitest';
 // Set up the mock before importing the module
-const mockFetchCrmProperties = jest.fn();
+const mockFetchCrmProperties = vi.fn();
 const mockSelf = {
     fetchCrmProperties: mockFetchCrmProperties,
 };
@@ -12,7 +13,7 @@ import { fetchCrmProperties } from '../../../crm/utils/fetchCrmProperties';
 const DEFAULT_OPTIONS = {};
 describe('fetchCrmProperties', () => {
     beforeEach(() => {
-        jest.clearAllMocks();
+        vi.clearAllMocks();
     });
     it('successfully fetches CRM properties', async () => {
         const mockApiResponse = {
@@ -20,15 +21,15 @@ describe('fetchCrmProperties', () => {
                 firstname: 'Test value for firstname',
                 lastname: 'Test value for lastname',
             },
-            cleanup: jest.fn(),
+            cleanup: vi.fn(),
         };
         const mockResponse = {
             ok: true,
-            json: jest.fn().mockResolvedValue(mockApiResponse),
+            json: vi.fn().mockResolvedValue(mockApiResponse),
         };
         mockFetchCrmProperties.mockResolvedValue(mockResponse);
         const propertyNames = ['firstname', 'lastname'];
-        const result = await fetchCrmProperties(propertyNames, jest.fn(), DEFAULT_OPTIONS);
+        const result = await fetchCrmProperties(propertyNames, vi.fn(), DEFAULT_OPTIONS);
         expect(mockFetchCrmProperties).toHaveBeenCalledWith(propertyNames, expect.any(Function), DEFAULT_OPTIONS);
         expect(result).toEqual({
             data: {
@@ -46,15 +47,15 @@ describe('fetchCrmProperties', () => {
                 email: 'john@example.com',
                 phone: null,
             },
-            cleanup: jest.fn(),
+            cleanup: vi.fn(),
         };
         const mockResponse = {
             ok: true,
-            json: jest.fn().mockResolvedValue(mockApiResponse),
+            json: vi.fn().mockResolvedValue(mockApiResponse),
         };
         mockFetchCrmProperties.mockResolvedValue(mockResponse);
         const propertyNames = ['firstname', 'lastname', 'email', 'phone'];
-        const result = await fetchCrmProperties(propertyNames, jest.fn(), DEFAULT_OPTIONS);
+        const result = await fetchCrmProperties(propertyNames, vi.fn(), DEFAULT_OPTIONS);
         expect(mockFetchCrmProperties).toHaveBeenCalledWith(propertyNames, expect.any(Function), DEFAULT_OPTIONS);
         expect(result).toEqual({
             data: {
@@ -70,29 +71,29 @@ describe('fetchCrmProperties', () => {
         const mockResponse = {
             ok: false,
             statusText: 'Not Found',
-            json: jest.fn().mockResolvedValue({}),
+            json: vi.fn().mockResolvedValue({}),
         };
         mockFetchCrmProperties.mockResolvedValue(mockResponse);
         const propertyNames = ['firstname'];
-        await expect(fetchCrmProperties(propertyNames, jest.fn(), DEFAULT_OPTIONS)).rejects.toThrow('Failed to fetch CRM properties: Not Found');
+        await expect(fetchCrmProperties(propertyNames, vi.fn(), DEFAULT_OPTIONS)).rejects.toThrow('Failed to fetch CRM properties: Not Found');
     });
     it('throws an error when fetch fails', async () => {
         mockFetchCrmProperties.mockRejectedValue(new Error('Network error'));
         const propertyNames = ['firstname'];
-        await expect(fetchCrmProperties(propertyNames, jest.fn(), DEFAULT_OPTIONS)).rejects.toThrow('Network error');
+        await expect(fetchCrmProperties(propertyNames, vi.fn(), DEFAULT_OPTIONS)).rejects.toThrow('Network error');
     });
     it('throws an error if the response is not an object', async () => {
         const mockApiResponse = {
             data: 'Invalid response',
-            cleanup: jest.fn(),
+            cleanup: vi.fn(),
         };
         const mockResponse = {
             ok: true,
-            json: jest.fn().mockResolvedValue(mockApiResponse),
+            json: vi.fn().mockResolvedValue(mockApiResponse),
         };
         mockFetchCrmProperties.mockResolvedValue(mockResponse);
         const propertyNames = ['firstname'];
-        await expect(fetchCrmProperties(propertyNames, jest.fn(), DEFAULT_OPTIONS)).rejects.toThrow('Invalid response format');
+        await expect(fetchCrmProperties(propertyNames, vi.fn(), DEFAULT_OPTIONS)).rejects.toThrow('Invalid response format');
     });
     it('throws an error if response contains invalid property values', async () => {
         const mockApiResponse = {
@@ -101,15 +102,15 @@ describe('fetchCrmProperties', () => {
                 lastname: 123,
                 email: 'john@example.com',
             },
-            cleanup: jest.fn(),
+            cleanup: vi.fn(),
         };
         const mockResponse = {
             ok: true,
-            json: jest.fn().mockResolvedValue(mockApiResponse),
+            json: vi.fn().mockResolvedValue(mockApiResponse),
         };
         mockFetchCrmProperties.mockResolvedValue(mockResponse);
         const propertyNames = ['firstname', 'lastname', 'email'];
-        await expect(fetchCrmProperties(propertyNames, jest.fn(), DEFAULT_OPTIONS)).rejects.toThrow('Invalid response format');
+        await expect(fetchCrmProperties(propertyNames, vi.fn(), DEFAULT_OPTIONS)).rejects.toThrow('Invalid response format');
     });
     it('passes the propertiesUpdatedCallback and allows it to be called', async () => {
         let capturedCallback;
@@ -118,18 +119,18 @@ describe('fetchCrmProperties', () => {
                 firstname: 'Initial',
                 lastname: 'Initial',
             },
-            cleanup: jest.fn(),
+            cleanup: vi.fn(),
         };
         const mockResponse = {
             ok: true,
-            json: jest.fn().mockResolvedValue(mockApiResponse),
+            json: vi.fn().mockResolvedValue(mockApiResponse),
         };
         mockFetchCrmProperties.mockImplementation((propertyNames, callback) => {
             capturedCallback = callback;
             return Promise.resolve(mockResponse);
         });
         const propertyNames = ['firstname', 'lastname'];
-        const mockCallback = jest.fn();
+        const mockCallback = vi.fn();
         await fetchCrmProperties(propertyNames, mockCallback, DEFAULT_OPTIONS);
         expect(typeof capturedCallback).toBe('function');
         // Simulate the callback being called with new properties
@@ -146,18 +147,18 @@ describe('fetchCrmProperties', () => {
                 firstname: 'Initial',
                 lastname: null,
             },
-            cleanup: jest.fn(),
+            cleanup: vi.fn(),
         };
         const mockResponse = {
             ok: true,
-            json: jest.fn().mockResolvedValue(mockApiResponse),
+            json: vi.fn().mockResolvedValue(mockApiResponse),
         };
         mockFetchCrmProperties.mockImplementation((propertyNames, callback) => {
             capturedCallback = callback;
             return Promise.resolve(mockResponse);
         });
         const propertyNames = ['firstname', 'lastname'];
-        const mockCallback = jest.fn();
+        const mockCallback = vi.fn();
         await fetchCrmProperties(propertyNames, mockCallback, DEFAULT_OPTIONS);
         expect(typeof capturedCallback).toBe('function');
         // Simulate the callback being called with new properties including null values
@@ -173,11 +174,11 @@ describe('fetchCrmProperties', () => {
                 firstname: 'John',
                 lastname: 'Doe',
             },
-            cleanup: jest.fn(),
+            cleanup: vi.fn(),
         };
         const mockResponse = {
             ok: true,
-            json: jest.fn().mockResolvedValue(mockApiResponse),
+            json: vi.fn().mockResolvedValue(mockApiResponse),
         };
         mockFetchCrmProperties.mockResolvedValue(mockResponse);
         const propertyNames = ['firstname', 'lastname'];
@@ -192,7 +193,7 @@ describe('fetchCrmProperties', () => {
                 },
             },
         };
-        await fetchCrmProperties(propertyNames, jest.fn(), options);
+        await fetchCrmProperties(propertyNames, vi.fn(), options);
         expect(mockFetchCrmProperties).toHaveBeenCalledWith(propertyNames, expect.any(Function), options);
     });
     it('preserves error handling with formatting options', async () => {
@@ -206,27 +207,27 @@ describe('fetchCrmProperties', () => {
                 },
             },
         };
-        await expect(fetchCrmProperties(propertyNames, jest.fn(), options)).rejects.toThrow('Network error');
+        await expect(fetchCrmProperties(propertyNames, vi.fn(), options)).rejects.toThrow('Network error');
         expect(mockFetchCrmProperties).toHaveBeenCalledWith(propertyNames, expect.any(Function), options);
     });
     it('preserves response validation with formatting options', async () => {
         const mockApiResponse = {
             data: 'Invalid response',
-            cleanup: jest.fn(),
+            cleanup: vi.fn(),
         };
         const mockResponse = {
             ok: true,
-            json: jest.fn().mockResolvedValue(mockApiResponse),
+            json: vi.fn().mockResolvedValue(mockApiResponse),
         };
         mockFetchCrmProperties.mockResolvedValue(mockResponse);
         const propertyNames = ['firstname'];
         const options = {
             propertiesToFormat: 'all',
         };
-        await expect(fetchCrmProperties(propertyNames, jest.fn(), options)).rejects.toThrow('Invalid response format');
+        await expect(fetchCrmProperties(propertyNames, vi.fn(), options)).rejects.toThrow('Invalid response format');
     });
     it('returns cleanup function that can be called', async () => {
-        const mockCleanup = jest.fn();
+        const mockCleanup = vi.fn();
         const mockApiResponse = {
             data: {
                 firstname: 'John',
@@ -235,11 +236,11 @@ describe('fetchCrmProperties', () => {
         };
         const mockResponse = {
             ok: true,
-            json: jest.fn().mockResolvedValue(mockApiResponse),
+            json: vi.fn().mockResolvedValue(mockApiResponse),
         };
         mockFetchCrmProperties.mockResolvedValue(mockResponse);
         const propertyNames = ['firstname'];
-        const result = await fetchCrmProperties(propertyNames, jest.fn(), DEFAULT_OPTIONS);
+        const result = await fetchCrmProperties(propertyNames, vi.fn(), DEFAULT_OPTIONS);
         expect(result.cleanup).toBe(mockCleanup);
         expect(typeof result.cleanup).toBe('function');
         // Verify cleanup can be called without errors

package/dist/crm/index.d.ts

@@ -1,4 +1,4 @@
-export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmAssociationStageTracker, CrmSimpleDeadline, CrmStageTracker, CrmStatistics, CrmActionButton, CrmActionLink, CrmCardActions, } from '../__synced__/crmRemoteComponents.synced';
+export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmAssociationStageTracker, CrmSimpleDeadline, CrmStageTracker, CrmStatistics, CrmActionButton, CrmActionLink, CrmCardActions, } from '../__synced__/remoteComponents.synced';
 export { useCrmProperties } from './hooks/useCrmProperties';
 export { useAssociations } from './hooks/useAssociations';
 export type * from '../__synced__/types/crm.synced';

package/dist/crm/index.js

@@ -1,3 +1,3 @@
-export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmAssociationStageTracker, CrmSimpleDeadline, CrmStageTracker, CrmStatistics, CrmActionButton, CrmActionLink, CrmCardActions, } from '../__synced__/crmRemoteComponents.synced';
+export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmAssociationStageTracker, CrmSimpleDeadline, CrmStageTracker, CrmStatistics, CrmActionButton, CrmActionLink, CrmCardActions, } from '../__synced__/remoteComponents.synced';
 export { useCrmProperties } from './hooks/useCrmProperties';
 export { useAssociations } from './hooks/useAssociations';

package/dist/experimental/index.d.ts

@@ -1,4 +1,4 @@
 export { useCrmProperties } from '../crm/hooks/useCrmProperties';
 export { useAssociations } from '../crm/hooks/useAssociations';
-export { Iframe, MediaObject, Stack2, Center, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, } from '../__synced__/experimentalRemoteComponents.synced';
+export { Iframe, MediaObject, Stack2, Center, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, } from '../__synced__/remoteComponents.synced';
 export type * from '../__synced__/experimental/types.synced';

package/dist/experimental/index.js

@@ -1,3 +1,3 @@
 export { useCrmProperties } from '../crm/hooks/useCrmProperties';
 export { useAssociations } from '../crm/hooks/useAssociations';
-export { Iframe, MediaObject, Stack2, Center, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, } from '../__synced__/experimentalRemoteComponents.synced';
+export { Iframe, MediaObject, Stack2, Center, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, } from '../__synced__/remoteComponents.synced';

package/dist/experimental/testing/__tests__/debug.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/experimental/testing/__tests__/debug.spec.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from 'vitest';
+import { Alert, Button, ButtonRow, List, Text } from '../../../index';
+import { render } from '../index';
+function MyComponent() {
+    return (_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", overlay: _jsx(List, { children: _jsx(Text, { children: "Item 1" }) }), children: "Click me!" }) }), _jsx(Alert, { title: "My Alert" })] }));
+}
+describe('debugging', () => {
+    describe('toString', () => {
+        it('should allow the root node to be converted to a string', () => {
+            const { getRootNode } = render(_jsx(MyComponent, {}));
+            expect(getRootNode().toString()).toMatchSnapshot();
+        });
+        it('should allow a component node to be converted to a string', () => {
+            const { find } = render(_jsx(MyComponent, {}));
+            expect(find(Button).toString()).toMatchSnapshot();
+        });
+    });
+    describe('debugLog()', () => {
+        let consoleLogSpy;
+        beforeEach(() => {
+            consoleLogSpy = vi.spyOn(console, 'log').mockImplementation(() => { });
+        });
+        afterEach(() => {
+            consoleLogSpy.mockRestore();
+        });
+        it('should allow debug logging the root node', () => {
+            const { debugLog } = render(_jsx(MyComponent, {}));
+            debugLog('MY COMPONENT TREE');
+            expect(consoleLogSpy.mock.calls).toMatchSnapshot();
+        });
+        it('should allow debug logging a component element node', () => {
+            const { find } = render(_jsx(MyComponent, {}));
+            find(Button).debugLog('MY BUTTON');
+            expect(consoleLogSpy.mock.calls).toMatchSnapshot();
+        });
+        it('should allow debug logging a component element node without a label', () => {
+            const { find } = render(_jsx(MyComponent, {}));
+            find(Button).debugLog();
+            expect(consoleLogSpy.mock.calls).toMatchSnapshot();
+        });
+    });
+});

package/dist/experimental/testing/__tests__/find.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/experimental/testing/__tests__/find.spec.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from 'vitest';
+import { Alert, Button, ButtonRow, Text } from '../../../index';
+import { render } from '../index';
+import { ComponentNotFoundError, FindInvalidComponentError, } from '../internal/errors';
+describe('find()', () => {
+    it('should allow assertions against initial rendered output', () => {
+        const buttonLabel = 'Click me!';
+        const { find } = render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: buttonLabel }) }), _jsx(Alert, { title: "My Alert" })] }));
+        const button = find(Button);
+        expect(button.props).toEqual({ variant: 'primary' });
+        expect(button.text).toEqual(buttonLabel);
+    });
+    it('should allow finding a matching component based on props object', () => {
+        const { find } = render(_jsxs(_Fragment, { children: [_jsxs(ButtonRow, { children: [_jsx(Button, { variant: "secondary", children: "Button 1" }), _jsx(Button, { variant: "primary", children: "Button 2" })] }), _jsx(Alert, { title: "My Alert" })] }));
+        const primaryButton = find(Button, { variant: 'primary' });
+        expect(primaryButton.props).toMatchObject({ variant: 'primary' });
+    });
+    it('should allow finding a matching component based on a predicate function', () => {
+        const { find } = render(_jsxs(_Fragment, { children: [_jsxs(ButtonRow, { children: [_jsx(Button, { variant: "secondary", children: "Button 1" }), _jsx(Button, { variant: "primary", children: "Button 2" })] }), _jsx(Alert, { title: "My Alert" })] }));
+        const primaryButton = find(Button, (node) => node.props.variant === 'primary');
+        expect(primaryButton.props).toMatchObject({ variant: 'primary' });
+    });
+    it('should throw an error when no match is found', () => {
+        const { find } = render(_jsx(Alert, { title: "My Alert" }));
+        expect(() => find(Text)).toThrow(ComponentNotFoundError);
+    });
+    it('should throw an error when target component is invalid', () => {
+        const { find } = render(_jsx(Alert, { title: "My Alert" }));
+        const MyFakeComponent = () => { };
+        expect(() => find(MyFakeComponent)).toThrow(FindInvalidComponentError);
+    });
+});

package/dist/experimental/testing/__tests__/findAll.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/experimental/testing/__tests__/findAll.spec.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { describe, expect, it } from 'vitest';
+import { Alert, Button, ButtonRow } from '../../../index';
+import { render } from '../index';
+describe('findAll()', () => {
+    it('should allow finding all matching components', () => {
+        const { findAll } = render(_jsxs(_Fragment, { children: [_jsxs(ButtonRow, { children: [_jsx(Button, { variant: "secondary", children: "Button 1" }), _jsx(Button, { variant: "primary", children: "Button 2" })] }), _jsx(Alert, { title: "My Alert" })] }));
+        const buttons = findAll(Button);
+        expect(buttons[0]?.props).toMatchObject({ variant: 'secondary' });
+        expect(buttons[1]?.props).toMatchObject({ variant: 'primary' });
+    });
+});

package/dist/experimental/testing/__tests__/findAllChildren.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/experimental/testing/__tests__/findAllChildren.spec.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { describe, expect, it } from 'vitest';
+import { Alert, Button, ButtonRow, Text } from '../../../index';
+import { render } from '../index';
+describe('findAllChildren()', () => {
+    it('should allow finding all direct children from the root node', () => {
+        const { findAllChildren } = render(_jsxs(_Fragment, { children: [_jsxs(ButtonRow, { children: [_jsx(Button, { variant: "secondary", children: "Button 1" }), _jsx(Button, { variant: "primary", children: "Button 2" })] }), _jsx(Alert, { title: "My Alert" }), _jsx(Alert, { title: "Another Alert" })] }));
+        const alerts = findAllChildren(Alert);
+        expect(alerts).toHaveLength(2);
+        expect(alerts[0]?.props).toMatchObject({ title: 'My Alert' });
+        expect(alerts[1]?.props).toMatchObject({ title: 'Another Alert' });
+    });
+    it('should only find direct children, not nested descendants', () => {
+        const { findAllChildren } = render(_jsxs(_Fragment, { children: [_jsxs(ButtonRow, { children: [_jsx(Button, { variant: "secondary", children: "Button 1" }), _jsx(Button, { variant: "primary", children: "Button 2" })] }), _jsx(Alert, { title: "My Alert" })] }));
+        const buttons = findAllChildren(Button);
+        expect(buttons).toHaveLength(0);
+    });
+    it('should allow finding all direct children from a nested component', () => {
+        const { find } = render(_jsxs(_Fragment, { children: [_jsxs(ButtonRow, { children: [_jsx(Button, { variant: "secondary", children: "Button 1" }), _jsx(Button, { variant: "primary", children: "Button 2" })] }), _jsx(Alert, { title: "My Alert" })] }));
+        const buttonRow = find(ButtonRow);
+        const buttons = buttonRow.findAllChildren(Button);
+        expect(buttons).toHaveLength(2);
+        expect(buttons[0]?.props).toMatchObject({ variant: 'secondary' });
+        expect(buttons[1]?.props).toMatchObject({ variant: 'primary' });
+    });
+    it('should return empty array when no direct children match', () => {
+        const { findAllChildren } = render(_jsx(_Fragment, { children: _jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Button 1" }) }) }));
+        const texts = findAllChildren(Text);
+        expect(texts).toHaveLength(0);
+    });
+    it('should support matcher function', () => {
+        const { find } = render(_jsx(_Fragment, { children: _jsxs(ButtonRow, { children: [_jsx(Button, { variant: "secondary", children: "Button 1" }), _jsx(Button, { variant: "primary", children: "Button 2" }), _jsx(Button, { variant: "secondary", children: "Button 3" })] }) }));
+        const buttonRow = find(ButtonRow);
+        const secondaryButtons = buttonRow.findAllChildren(Button, (node) => node.props.variant === 'secondary');
+        expect(secondaryButtons).toHaveLength(2);
+        expect(secondaryButtons[0]?.props).toMatchObject({ variant: 'secondary' });
+        expect(secondaryButtons[1]?.props).toMatchObject({ variant: 'secondary' });
+    });
+    it('should support matcher object', () => {
+        const { find } = render(_jsx(_Fragment, { children: _jsxs(ButtonRow, { children: [_jsx(Button, { variant: "secondary", children: "Button 1" }), _jsx(Button, { variant: "primary", children: "Button 2" }), _jsx(Button, { variant: "secondary", children: "Button 3" })] }) }));
+        const buttonRow = find(ButtonRow);
+        const primaryButtons = buttonRow.findAllChildren(Button, {
+            variant: 'primary',
+        });
+        expect(primaryButtons).toHaveLength(1);
+        expect(primaryButtons[0]?.props).toMatchObject({ variant: 'primary' });
+    });
+});

package/dist/experimental/testing/__tests__/findChild.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/experimental/testing/__tests__/findChild.spec.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from 'vitest';
+import { Alert, Button, ButtonRow } from '../../../index';
+import { render } from '../index';
+import { ComponentNotFoundError, FindInvalidComponentError, } from '../internal/errors';
+describe('findChild()', () => {
+    it('should allow finding a child from the root node', () => {
+        const buttonLabel = '';
+        const { findChild } = render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: buttonLabel }) }), _jsx(Alert, { title: "My Alert" })] }));
+        expect(findChild(ButtonRow)).toBeDefined();
+    });
+    it('should allow finding a child from a nested component', () => {
+        const buttonLabel = '';
+        const { find } = render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: buttonLabel }) }), _jsx(Alert, { title: "My Alert" })] }));
+        const buttonRow = find(ButtonRow);
+        expect(buttonRow.findChild(Button).props).toEqual({ variant: 'primary' });
+    });
+    it('should throw an error when no match is found', () => {
+        const { find } = render(_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Click me!" }) }));
+        const buttonRow = find(ButtonRow);
+        expect(() => buttonRow.findChild(Alert)).toThrow(ComponentNotFoundError);
+    });
+    it('should throw an error when target component is invalid', () => {
+        const { find } = render(_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Click me!" }) }));
+        const MyFakeComponent = () => { };
+        const buttonRow = find(ButtonRow);
+        expect(() => buttonRow.findChild(MyFakeComponent)).toThrow(FindInvalidComponentError);
+    });
+});

package/dist/experimental/testing/__tests__/fragments.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/experimental/testing/__tests__/fragments.spec.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from 'vitest';
+import { Alert, Button, ButtonRow, List, Text } from '../../../index';
+import { render } from '../index';
+import { InvalidFragmentPropArrayError } from '../internal/errors';
+describe('fragments', () => {
+    it('should allow assertions against components with fragment props', () => {
+        const buttonLabel = 'Click me!';
+        const { find } = render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", overlay: _jsx(List, { children: _jsx(Text, { children: "Item 1" }) }), children: buttonLabel }) }), _jsx(Alert, { title: "My Alert" })] }));
+        expect(find(Text).text).toEqual('Item 1');
+        expect(find(Button).text).toEqual(buttonLabel);
+    });
+    it('should handle undefined fragment props', () => {
+        const buttonLabel = 'Click me!';
+        const { find } = render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: buttonLabel }) }), _jsx(Alert, { title: "My Alert" })] }));
+        const button = find(Button);
+        const { props: buttonProps } = button;
+        expect(buttonProps.overlay).toBeUndefined();
+        expect(find(Alert).props).toEqual({ title: 'My Alert' });
+    });
+    it('should handle null fragment props', () => {
+        const buttonLabel = 'Click me!';
+        const { find } = render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", overlay: null, children: buttonLabel }) }), _jsx(Alert, { title: "My Alert" })] }));
+        const button = find(Button);
+        const { props: buttonProps } = button;
+        expect(buttonProps.overlay?.children).toHaveLength(0);
+        expect(find(Alert).props).toEqual({ title: 'My Alert' });
+    });
+    it('should throw an error if an array fragment prop is passed', () => {
+        const buttonLabel = 'Click me!';
+        const arrayProp = [1, 2, 3];
+        expect(() => {
+            render(_jsx(Button, { variant: "primary", overlay: arrayProp, children: buttonLabel }));
+        }).toThrow(InvalidFragmentPropArrayError);
+    });
+    it('should handle string fragment props', () => {
+        const buttonLabel = 'Click me!';
+        const { find } = render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", overlay: "My Overlay", children: buttonLabel }) }), _jsx(Alert, { title: "My Alert" })] }));
+        const button = find(Button);
+        expect(button.props.overlay?.text).toEqual('My Overlay');
+        expect(find(Alert).props).toEqual({ title: 'My Alert' });
+    });
+    it('should handle fragment props that are a JSX fragment', () => {
+        const buttonLabel = 'Click me!';
+        const { find } = render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", overlay: _jsx(_Fragment, { children: "My Overlay" }), children: buttonLabel }) }), _jsx(Alert, { title: "My Alert" })] }));
+        const button = find(Button);
+        expect(button.props.overlay?.text).toEqual('My Overlay');
+        expect(find(Alert).props).toEqual({ title: 'My Alert' });
+    });
+    it('should allow assertions against fragments rendered by a custom component', () => {
+        const buttonLabel = 'Click me!';
+        function MyOverlay() {
+            return (_jsx(List, { children: _jsx(Text, { children: "Item 1" }) }));
+        }
+        const { find } = render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", overlay: _jsx(MyOverlay, {}), children: buttonLabel }) }), _jsx(Alert, { title: "My Alert" })] }));
+        expect(find(Text).text).toEqual('Item 1');
+        expect(find(Button).text).toEqual(buttonLabel);
+    });
+});

package/dist/experimental/testing/__tests__/invalid-components.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/experimental/testing/__tests__/invalid-components.spec.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { describe, expect, it } from 'vitest';
+import { Alert, Button, ButtonRow, Text } from '../../../index';
+import { render } from '../index';
+import { InvalidComponentsError } from '../internal/errors';
+import { createDeferred } from '../internal/utils/promise-utils';
+const setTimeoutPromise = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+describe('handling invalid components', () => {
+    it('should throw an error if initial render contains invalid components', () => {
+        function MyComponent() {
+            return (_jsx("div", { children: _jsx("span", { children: _jsx(Button, { variant: "primary", children: "Click me!" }) }) }));
+        }
+        expect(() => render(_jsx(MyComponent, {}))).toThrow(InvalidComponentsError);
+        let errorMessage;
+        try {
+            render(_jsx(MyComponent, {}));
+        }
+        catch (error) {
+            errorMessage = String(error);
+        }
+        expect(errorMessage).toMatchSnapshot();
+    });
+    it('should throw an error if initial render contains invalid components inside a fragment', () => {
+        function MyComponent() {
+            return (_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", overlay: _jsx("div", { children: "Overlay" }), children: "Click me!" }) }), _jsx(Alert, { title: "My Alert" })] }));
+        }
+        expect(() => render(_jsx(MyComponent, {}))).toThrow(InvalidComponentsError);
+    });
+    it('should throw an error if triggering an event results in an invalid component to be rendered', () => {
+        function Counter() {
+            const [count, setCount] = useState(0);
+            const handleClick = () => {
+                setCount(count + 1);
+            };
+            return (_jsx(Button, { variant: "primary", onClick: handleClick, children: count === 0 ? 'Click me!' : _jsxs("div", { children: ["Clicked ", count, " times"] }) }));
+        }
+        const { find } = render(_jsx(Counter, {}));
+        expect(find(Button).text).toEqual('Click me!');
+        // Should throw an error because the component is invalid
+        expect(() => {
+            find(Button).trigger('onClick');
+        }).toThrow(InvalidComponentsError);
+    });
+    it('should throw an error if the component is invalid after an asynchronous update', async () => {
+        function AsyncCounter() {
+            const [count, setCount] = useState(0);
+            useEffect(() => {
+                setTimeout(() => {
+                    setCount((currentCount) => currentCount + 1);
+                }, 10);
+            }, []);
+            return (_jsx(Button, { children: count === 0 ? 'Click me!' : _jsxs("div", { children: ["Clicked ", count, " times"] }) }));
+        }
+        const { find, waitFor } = render(_jsx(AsyncCounter, {}));
+        expect(find(Button).text).toEqual('Click me!');
+        await expect(waitFor(() => {
+            expect(find(Button).text).toEqual('Clicked 1 times');
+        })).rejects.toThrow(InvalidComponentsError);
+    });
+    it('should throw an error if the component is invalid after an asynchronous update when not using waitFor', async () => {
+        const usePromise = (promise) => {
+            const [isPending, setIsPending] = useState(true);
+            useEffect(() => {
+                setIsPending(true);
+                promise
+                    .then(() => setIsPending(false))
+                    .catch(() => setIsPending(false));
+            }, [promise]);
+            return { isPending };
+        };
+        function AsyncCounter({ promise }) {
+            const { isPending } = usePromise(promise);
+            if (isPending) {
+                return _jsx(Text, { children: "Loading..." });
+            }
+            return _jsx("div", { children: "Loaded!" });
+        }
+        const loadingDeferred = createDeferred();
+        const { find } = render(_jsx(AsyncCounter, { promise: loadingDeferred.promise }));
+        expect(find(Text).text).toEqual('Loading...');
+        loadingDeferred.resolve();
+        await setTimeoutPromise(0);
+        expect(() => {
+            find(Button);
+        }).toThrow(InvalidComponentsError);
+    });
+});

package/dist/experimental/testing/__tests__/isMatch.spec.d.ts

@@ -0,0 +1 @@
+export {};