diff --git a/src/experimental/whirl.tsx b/src/experimental/whirl.tsx
index 4b16881..8920603 100644
--- a/src/experimental/whirl.tsx
+++ b/src/experimental/whirl.tsx
@@ -54,6 +54,7 @@ export const Whirl: FunctionComponent<WhirlProps> = ({
       viewBox="0 0 100 100"
       className={wrapperClass}
       preserveAspectRatio="xMidYMid"
+      data-testid="whirl"
     >
       <g transform="translate(50,50)">
         <g transform="scale(0.8)">
diff --git a/test/experimantal/whirl.spec.tsx b/test/experimantal/whirl.spec.tsx
new file mode 100644
index 0000000..8a0721f
--- /dev/null
+++ b/test/experimantal/whirl.spec.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Whirl } from '../../src/beta'
+
+describe('Whirl', () => {
+  test('renders Whirl component', () => {
+    render(<Whirl />);
+    const svgElement = screen.getByTestId('whirl');
+    expect(svgElement).toBeInTheDocument();
+  });
+
+  test('applies wrapperClass correctly', () => {
+    render(<Whirl wrapperClass="test-class" />);
+    const svgElement = screen.getByTestId('whirl');
+    expect(svgElement).toHaveClass('test-class');
+  });
+
+  test('applies wrapperStyle correctly', () => {
+    render(<Whirl wrapperStyle={{ backgroundColor: 'red' }} />);
+    const svgElement = screen.getByTestId('whirl');
+    expect(svgElement).toHaveStyle('background-color: red');
+  });
+
+  test('does not render when visible is false', () => {
+    render(<Whirl visible={false} />);
+    const svg = screen.queryByTestId('whirl');
+    expect(svg).not.toBeInTheDocument();
+  });
+});
+