chore: add unit tests

.nvmrc

@@ -0,0 +1 @@
+20.12.2

eslint.config.js

@@ -0,0 +1,44 @@
+module.exports = {
+  extends: ['airbnb', 'airbnb-typescript'],
+  plugins: ['@typescript-eslint'],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+      experimentalObjectRestSpread: true,
+    },
+    project: './tsconfig.json',
+  },
+  rules: {
+    'no-underscore-dangle': 0,
+    'import/no-extraneous-dependencies': 0,
+    'react/require-extension': 0,
+    'react/jsx-filename-extension': 0,
+    'react/destructuring-assignment': 0,
+    'react/default-props-match-prop-types': 0,
+    'react/jsx-props-no-spreading': 0,
+    'react/static-property-placement': 0,
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'arrow-body-style': 0,
+    'prefer-arrow-callback': 0,
+    'func-names': 0,
+    'react/forbid-prop-types': 0,
+    'comma-dangle': 0,
+    'react/sort-comp': 0,
+    'react/prop-types': 0,
+    'arrow-parens': 0,
+    'import/extensions': [
+      'error',
+      'always',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
+  },
+  env: {
+    jest: true,
+  },
+};

jest-config.js

@@ -2,5 +2,6 @@ module.exports = {
   transform: {
     '^.+\\.(jsx|tsx|js|ts)?$': 'babel-jest'
   },
-  reporters: ['default', 'jest-junit']
+  reporters: ['default', 'jest-junit'],
+  setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
 };

package.json

@@ -44,6 +44,8 @@
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
     "@storybook/react": "^8.4.7",
     "@storybook/react-webpack5": "^8.4.7",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
     "@types/jest": "^29.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
@@ -68,7 +70,6 @@
     "jest-junit": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-test-renderer": "^19.0.0",
     "storybook": "^8.4.7",
     "ts-loader": "^9.2.8",
     "typescript": "^5.0.0"

setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

src/react-15.6/index.test.tsx

@@ -0,0 +1,61 @@
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import AspectRatio from '.';
+
+describe('AspectRatio Component (Class)', () => {
+  it('renders with default props', () => {
+    const { getByRole } = render(<AspectRatio />);
+    const div = getByRole('generic');
+
+    expect(div).toBeInTheDocument();
+    expect(div).toHaveClass('react-aspect-ratio-placeholder');
+    expect(div).toHaveStyle('--aspect-ratio: (1)');
+  });
+
+  it('renders with custom className and ratio', () => {
+    const { getByRole } = render(<AspectRatio className="custom-class" ratio={1.5} />);
+    const div = getByRole('generic');
+
+    expect(div).toBeInTheDocument();
+    expect(div).toHaveClass('custom-class');
+    expect(div).toHaveStyle('--aspect-ratio: (1.5)');
+  });
+
+  it('applies custom styles', () => {
+    const { getByRole } = render(<AspectRatio style={{ backgroundColor: 'blue' }} />);
+    const div = getByRole('generic');
+
+    expect(div).toHaveStyle('background-color: blue');
+    expect(div).toHaveStyle('--aspect-ratio: (1)');
+  });
+
+  it('renders children correctly', () => {
+    const { getByText } = render(
+      <AspectRatio>
+        <span>Test Child</span>
+      </AspectRatio>
+    );
+
+    expect(getByText('Test Child')).toBeInTheDocument();
+  });
+
+  it('updates custom property in componentDidUpdate', () => {
+    const { getByRole, rerender } = render(<AspectRatio ratio={1} />);
+    const div = getByRole('generic');
+
+    // Before update
+    expect(div.style.getPropertyValue('--aspect-ratio')).toBe('(1)');
+
+    // Update props
+    rerender(<AspectRatio ratio={2} />);
+    expect(div.style.getPropertyValue('--aspect-ratio')).toBe('(2)');
+  });
+
+  it('spreads additional props onto the div', () => {
+    const { getByRole } = render(<AspectRatio id="custom-id" data-testid="aspect-ratio" />);
+    const div = getByRole('generic');
+
+    expect(div).toHaveAttribute('id', 'custom-id');
+    expect(div).toHaveAttribute('data-testid', 'aspect-ratio');
+  });
+});

src/react-15.6.tsx → src/react-15.6/index.tsx

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 
-import type { Props } from './types';
+import type { Props } from '../types';
 
 const CUSTOM_PROPERTY_NAME = '--aspect-ratio';
 const DEFAULT_CLASS_NAME = 'react-aspect-ratio-placeholder';

src/react-latest/index.test.tsx

@@ -0,0 +1,63 @@
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import AspectRatio from '.';
+import { createRef } from 'react';
+
+describe('AspectRatio Component', () => {
+  it('renders with default props', () => {
+    const { container } = render(<AspectRatio />);
+    const div = container.firstChild;
+
+    expect(div).toBeInTheDocument();
+    expect(div).toHaveClass('react-aspect-ratio-placeholder');
+    expect(div).toHaveStyle('--aspect-ratio: (1)');
+  });
+
+  it('renders with a custom className and ratio', () => {
+    const { container } = render(
+      <AspectRatio className="custom-class" ratio={1.5} />
+    );
+    const div = container.firstChild;
+
+    expect(div).toBeInTheDocument();
+    expect(div).toHaveClass('custom-class');
+    expect(div).toHaveStyle('--aspect-ratio: (1.5)');
+  });
+
+  it('applies custom style', () => {
+    const { container } = render(
+      <AspectRatio style={{ backgroundColor: 'red' }} />
+    );
+    const div = container.firstChild;
+
+    expect(div).toBeInTheDocument();
+    expect(div).toHaveStyle('background-color: red');
+    expect(div).toHaveStyle('--aspect-ratio: (1)');
+  });
+
+  it('renders children correctly', () => {
+    const { getByText } = render(
+      <AspectRatio>
+        <span>Test Child</span>
+      </AspectRatio>
+    );
+    expect(getByText('Test Child')).toBeInTheDocument();
+  });
+
+  it('forwards the ref correctly', () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<AspectRatio ref={ref} />);
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe('DIV');
+  });
+
+  it('spreads additional props onto the div', () => {
+    const { container } = render(
+      <AspectRatio id="custom-id" data-testid="aspect-ratio" />
+    );
+    const div = container.firstChild;
+
+    expect(div).toHaveAttribute('id', 'custom-id');
+    expect(div).toHaveAttribute('data-testid', 'aspect-ratio');
+  });
+});

src/react-latest.tsx → src/react-latest/index.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import type { Props } from './types';
+import type { Props } from '../types';
 
 const CUSTOM_PROPERTY_NAME = '--aspect-ratio';
 const DEFAULT_CLASS_NAME = 'react-aspect-ratio-placeholder';

tsconfig.json

@@ -12,6 +12,7 @@
     "outDir": "dist",
     "skipLibCheck": true,
     "target": "ESNext",
+    "types": ["@testing-library/jest-dom"]
   },
   "include": [
     "src/**/*"