diff --git a/packages/ui/src/components/compose/Compose.test.tsx b/packages/ui/src/components/compose/Compose.test.tsx
new file mode 100644
index 00000000..69edda00
--- /dev/null
+++ b/packages/ui/src/components/compose/Compose.test.tsx
@@ -0,0 +1,66 @@
+import type { DComposeProps } from './Compose';
+
+import { render } from '../../__tests__/utils';
+import { DButton } from '../button';
+import { DInput } from '../input';
+import { DCompose, DComposeItem } from './index';
+
+const dPrefix = 'rd-';
+
+describe('DCompose', () => {
+ it('renders correctly', () => {
+ const { getByRole } = render();
+ const composeElement = getByRole('group');
+ expect(composeElement).toBeInTheDocument();
+ });
+
+ it('renders with different dSize values', () => {
+ const sizes: (DComposeProps['dSize'] | undefined)[] = ['smaller', 'larger'];
+ sizes.forEach((size) => {
+ const { container } = render(
+
+
+ Button
+
+ );
+ const inputDiv = container.querySelector('.rd-input');
+ const buttonElement = container.querySelector('.rd-button');
+ expect(inputDiv).toHaveClass(`${dPrefix}input--${size}`);
+ expect(buttonElement).toHaveClass(`${dPrefix}button--${size}`);
+ });
+ });
+
+ it('renders vertically', () => {
+ const { getByRole } = render();
+ const composeElement = getByRole('group');
+ expect(composeElement).toHaveClass(`${dPrefix}compose--vertical`);
+ });
+
+ it('renders with dDisabled set to true', () => {
+ const { container } = render(
+
+
+ Button
+
+ );
+ const inputDiv = container.querySelector('.rd-input');
+ const buttonElement = container.querySelector('.rd-button');
+ expect(inputDiv?.classList.contains('is-disabled')).toBe(true);
+ expect(buttonElement).toHaveAttribute('disabled');
+ });
+
+ it('renders with children', () => {
+ const { container } = render(
+
+
+
+
+
+ Button
+
+
+ );
+ const composeItemElements = container.querySelectorAll(`.rd-compose-item`);
+ expect(composeItemElements.length).toBe(2);
+ });
+});