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..2caca861
--- /dev/null
+++ b/packages/ui/src/components/compose/Compose.test.tsx
@@ -0,0 +1,96 @@
+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);
+ });
+
+ // __noStyle test
+ it('should not have default style class when __noStyle is true', () => {
+ const { container } = render(
+
+ Child
+
+ );
+
+ const hasStyleClass = container.firstChild?.classList.contains('rd-compose');
+ expect(hasStyleClass).toBe(false);
+ });
+
+ it('should have default style class when __noStyle is false or not provided', () => {
+ const { container: container1 } = render(
+
+ Child
+
+ );
+ const hasStyleClass1 = container1?.firstChild?.classList.contains('rd-compose');
+ expect(hasStyleClass1).toBe(true);
+
+ const { container: container2 } = render(
+
+ Child
+
+ );
+ const hasStyleClass2 = container2?.firstChild?.classList.contains('rd-compose');
+ expect(hasStyleClass2).toBe(true);
+ });
+});