Merge pull request #9 from internxt/chore/change-test-package

[_]: chore/use testing-library instead of react-test-renderer

package.json

@@ -32,9 +32,12 @@
     "@storybook/react": "^8.0.4",
     "@storybook/react-vite": "^8.0.4",
     "@storybook/test": "^8.0.4",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.2",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react": "^18.2.67",
+    "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.3.1",
     "@typescript-eslint/parser": "^7.3.1",
     "@vitest/coverage-istanbul": "^1.4.0",
@@ -51,7 +54,6 @@
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.12",
     "react": "^18.2.0",
-    "react-test-renderer": "^18.2.0",
     "sass": "^1.72.0",
     "storybook": "^8.0.4",
     "tailwindcss": "^3.4.1",

src/components/button/__test__/Button.test.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { Button } from '../Button';
-import renderer from 'react-test-renderer';
 
 describe('Button component', () => {
   it('Button onClick should be called correctly', () => {
@@ -14,57 +13,57 @@ describe('Button component', () => {
   });
 
   it('Primary button should render correctly', () => {
-    const button = renderer.create(<Button variant="primary">Primary</Button>).toJSON();
+    const button = render(<Button variant="primary">Primary</Button>);
     expect(button).toMatchSnapshot();
   });
 
   it('Secondary button should render correctly', () => {
-    const button = renderer.create(<Button variant="secondary">Secondary</Button>).toJSON();
+    const button = render(<Button variant="secondary">Secondary</Button>);
     expect(button).toMatchSnapshot();
   });
 
   it('Ghost button should render correctly', () => {
-    const button = renderer.create(<Button variant="ghost">Ghost</Button>).toJSON();
+    const button = render(<Button variant="ghost">Ghost</Button>);
     expect(button).toMatchSnapshot();
   });
 
   it('Destructive button should render correctly', () => {
-    const button = renderer.create(<Button variant="destructive">Destructive</Button>).toJSON();
+    const button = render(<Button variant="destructive">Destructive</Button>);
     expect(button).toMatchSnapshot();
   });
 
   it('Primary disabled button should render correctly', () => {
-    const button = renderer.create(<Button variant="primary" disabled />).toJSON();
+    const button = render(<Button variant="primary" disabled />);
     expect(button).toMatchSnapshot();
   });
 
   it('Secondary disabled button should render correctly', () => {
-    const button = renderer.create(<Button variant="secondary" disabled />).toJSON();
+    const button = render(<Button variant="secondary" disabled />);
     expect(button).toMatchSnapshot();
   });
 
   it('Ghost disabled button should render correctly', () => {
-    const button = renderer.create(<Button variant="ghost" disabled />).toJSON();
+    const button = render(<Button variant="ghost" disabled />);
     expect(button).toMatchSnapshot();
   });
 
   it('Destructive disabled button should render correctly', () => {
-    const button = renderer.create(<Button variant="destructive" disabled />).toJSON();
+    const button = render(<Button variant="destructive" disabled />);
     expect(button).toMatchSnapshot();
   });
 
   it('Primary medium button should render correctly', () => {
-    const button = renderer.create(<Button variant="primary" size="medium" />).toJSON();
+    const button = render(<Button variant="primary" size="medium" />);
     expect(button).toMatchSnapshot();
   });
 
   it('Primary loading button should render correctly', () => {
-    const button = renderer.create(<Button variant="primary" loading />).toJSON();
+    const button = render(<Button variant="primary" loading />);
     expect(button).toMatchSnapshot();
   });
 
   it('Primary submit button should render correctly', () => {
-    const button = renderer.create(<Button variant="primary" type="submit" />).toJSON();
+    const button = render(<Button variant="primary" type="submit" />);
     expect(button).toMatchSnapshot();
   });
 });