diff --git a/change/@fluentui-react-drawer-c5be950c-8d8e-4cae-8837-d0b0c22b26dc.json b/change/@fluentui-react-drawer-c5be950c-8d8e-4cae-8837-d0b0c22b26dc.json
new file mode 100644
index 0000000000000..f958609452203
--- /dev/null
+++ b/change/@fluentui-react-drawer-c5be950c-8d8e-4cae-8837-d0b0c22b26dc.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "test: add simple renderization tests for sub components",
+  "packageName": "@fluentui/react-drawer",
+  "email": "marcosvmmoura@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-drawer/src/components/Drawer/Drawer.cy.tsx b/packages/react-components/react-drawer/src/components/Drawer/Drawer.cy.tsx
index 3104939adde7b..e262c583a0e3d 100644
--- a/packages/react-components/react-drawer/src/components/Drawer/Drawer.cy.tsx
+++ b/packages/react-components/react-drawer/src/components/Drawer/Drawer.cy.tsx
@@ -2,9 +2,11 @@ import * as React from 'react';
 import { mount } from '@cypress/react';
 import { FluentProvider } from '@fluentui/react-provider';
 import { webLightTheme } from '@fluentui/react-theme';
-import { Drawer, DrawerProps } from '@fluentui/react-drawer';
 import { dialogSurfaceClassNames } from '@fluentui/react-dialog';
 
+import { Drawer } from './Drawer';
+import type { DrawerProps } from './Drawer.types';
+
 const mountFluent = (element: JSX.Element) => {
   mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);
 };
diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx
index 950009e3a42b6..e436d504f464d 100644
--- a/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx
+++ b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import { mount } from '@cypress/react';
 import { FluentProvider } from '@fluentui/react-provider';
 import { webLightTheme } from '@fluentui/react-theme';
-import { DrawerBody } from '@fluentui/react-drawer';
+
+import { DrawerBody } from './DrawerBody';
 
 const mountFluent = (element: JSX.Element) => {
   mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);
diff --git a/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.cy.tsx b/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.cy.tsx
new file mode 100644
index 0000000000000..e861c0cccedbe
--- /dev/null
+++ b/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.cy.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { mount } from '@cypress/react';
+import { FluentProvider } from '@fluentui/react-provider';
+import { webLightTheme } from '@fluentui/react-theme';
+
+import { DrawerFooter } from './DrawerFooter';
+
+const mountFluent = (element: JSX.Element) => {
+  mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);
+};
+
+describe('DrawerFooter', () => {
+  it('should render drawer footer with correct tag name and content', () => {
+    mountFluent(<DrawerFooter id="drawer-footer">Content</DrawerFooter>);
+
+    cy.get('#drawer-footer').should('exist');
+    cy.get('#drawer-footer').should('match', 'footer');
+    cy.get('#drawer-footer').should('have.html', 'Content');
+  });
+});
diff --git a/packages/react-components/react-drawer/src/components/DrawerHeader/DrawerHeader.cy.tsx b/packages/react-components/react-drawer/src/components/DrawerHeader/DrawerHeader.cy.tsx
new file mode 100644
index 0000000000000..ecf0dff61e4c5
--- /dev/null
+++ b/packages/react-components/react-drawer/src/components/DrawerHeader/DrawerHeader.cy.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { mount } from '@cypress/react';
+import { FluentProvider } from '@fluentui/react-provider';
+import { webLightTheme } from '@fluentui/react-theme';
+
+import { DrawerHeader } from './DrawerHeader';
+
+const mountFluent = (element: JSX.Element) => {
+  mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);
+};
+
+describe('DrawerHeader', () => {
+  it('should render drawer header with correct tag name and content', () => {
+    mountFluent(<DrawerHeader id="drawer-header">Content</DrawerHeader>);
+
+    cy.get('#drawer-header').should('exist');
+    cy.get('#drawer-header').should('match', 'header');
+    cy.get('#drawer-header').should('have.html', 'Content');
+  });
+});
diff --git a/packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/DrawerHeaderNavigation.cy.tsx b/packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/DrawerHeaderNavigation.cy.tsx
new file mode 100644
index 0000000000000..4a67d317f8758
--- /dev/null
+++ b/packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/DrawerHeaderNavigation.cy.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { mount } from '@cypress/react';
+import { FluentProvider } from '@fluentui/react-provider';
+import { webLightTheme } from '@fluentui/react-theme';
+
+import { DrawerHeaderNavigation } from './DrawerHeaderNavigation';
+
+const mountFluent = (element: JSX.Element) => {
+  mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);
+};
+
+describe('DrawerHeaderNavigation', () => {
+  it('should render drawer nav with correct tag name and content', () => {
+    mountFluent(<DrawerHeaderNavigation id="drawer-nav">Content</DrawerHeaderNavigation>);
+
+    cy.get('#drawer-nav').should('exist');
+    cy.get('#drawer-nav').should('match', 'nav');
+    cy.get('#drawer-nav').should('have.html', 'Content');
+  });
+});
diff --git a/packages/react-components/react-drawer/src/components/DrawerHeaderTitle/DrawerHeaderTitle.cy.tsx b/packages/react-components/react-drawer/src/components/DrawerHeaderTitle/DrawerHeaderTitle.cy.tsx
new file mode 100644
index 0000000000000..4c3afb97ea3b8
--- /dev/null
+++ b/packages/react-components/react-drawer/src/components/DrawerHeaderTitle/DrawerHeaderTitle.cy.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { mount } from '@cypress/react';
+import { FluentProvider } from '@fluentui/react-provider';
+import { webLightTheme } from '@fluentui/react-theme';
+
+import { DrawerHeaderTitle } from './DrawerHeaderTitle';
+
+const mountFluent = (element: JSX.Element) => {
+  mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);
+};
+
+describe('DrawerHeaderTitle', () => {
+  it('should render drawer title with correct tag name', () => {
+    mountFluent(<DrawerHeaderTitle id="drawer-title">Content</DrawerHeaderTitle>);
+
+    cy.get('#drawer-title').should('exist');
+    cy.get('#drawer-title').should('match', 'div');
+  });
+
+  it('should render children H2 tag by default', () => {
+    mountFluent(<DrawerHeaderTitle id="drawer-title">Content</DrawerHeaderTitle>);
+
+    cy.get('#drawer-title').contains('h2', 'Content');
+  });
+
+  it('should render different heading when provided', () => {
+    mountFluent(
+      <DrawerHeaderTitle id="drawer-title" heading={{ as: 'h1' }}>
+        Content
+      </DrawerHeaderTitle>,
+    );
+
+    cy.get('#drawer-title').contains('h1', 'Content');
+  });
+
+  it('should render action when provided', () => {
+    mountFluent(
+      <DrawerHeaderTitle id="drawer-title" action={<button>Action</button>}>
+        Content
+      </DrawerHeaderTitle>,
+    );
+
+    cy.get('#drawer-title').contains('h2', 'Content');
+    cy.get('#drawer-title').contains('button', 'Action');
+  });
+});