feat(react): added tests

packages/react/jest-setup.js

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

packages/react/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
+};

packages/react/src/useClassName.ts

@@ -12,7 +12,7 @@ export function useClassNames<Key extends string>(styles: Record<Key, Style>) {
   return classes as Record<Key, string>;
 }
 
-export function useClassName(style: Style = {}) {
+export function useClassName(style: Style) {
   const classes = useClassNames({ component: style });
 
   return classes.component;

packages/react/tests/useClassName.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { morfeo } from '@morfeo/web';
+import { render } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+import { useClassName } from '../src';
+
+const theme = {
+  colors: {
+    primary: 'black',
+  },
+} as any;
+
+morfeo.setTheme('default', theme);
+
+beforeEach(() => {
+  morfeo.useTheme('default');
+});
+
+test('should apply the style with the className generated by `useClassName`', async () => {
+  const { result } = renderHook(() => useClassName({ bg: 'primary' }));
+  const { getByTestId } = render(
+    <button className={result.current} data-testid="button" />,
+  );
+  const button = getByTestId('button');
+
+  expect(button).toHaveStyle(
+    `background-color: ${morfeo.getTheme()['colors']['primary']}`,
+  );
+});