refactor: use vitest browser mode

.github/workflows/ci.yaml

@@ -23,6 +23,8 @@ jobs:
         node-version-file: .nvmrc
     - name: Install dependencies
       run: pnpm install
+    - name: Install Playwright Browsers
+      run: pnpx playwright install --with-deps
     - name: Lint
       run: pnpm --filter="...[origin/${{ github.base_ref }}]" "/lint:*/"
     - name: Test

.github/workflows/coverage.yaml

@@ -22,6 +22,8 @@ jobs:
           node-version-file: .nvmrc
       - name: Install dependencies
         run: pnpm install
+      - name: Install Playwright Browsers
+        run: pnpx playwright install --with-deps
       - name: Run tests
         run: pnpm run test --coverage
       - name: Upload code coverage

.templates/component/package.json

@@ -28,16 +28,14 @@
     "@storybook/react": "catalog:",
     "@storybook/react-vite": "catalog:",
     "@storybook/test": "catalog:",
-    "@testing-library/jest-dom": "catalog:",
-    "@testing-library/react": "catalog:",
     "@types/react": "^18.3.12",
-    "happy-dom": "catalog:",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "storybook": "catalog:",
     "tsup": "catalog:",
     "typescript": "catalog:",
-    "vitest": "catalog:"
+    "vitest": "catalog:",
+    "vitest-browser-react": "catalog:"
   },
   "peerDependencies": {
     "react": ">= 18",

.templates/component/vitest.config.ts

@@ -5,7 +5,12 @@ export default mergeConfig(
   defaultConfig,
   defineProject({
     test: {
-      setupFiles: './vitest.setup.ts',
+      browser: {
+        enabled: true,
+        headless: true,
+        provider: 'playwright',
+        instances: [{ browser: 'chromium' }],
+      },
     },
   }),
 );

packages/avatar/package.json

@@ -21,8 +21,8 @@
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.1.0",
-    "@sipe-team/typography": "workspace:^",
     "@sipe-team/tokens": "workspace:*",
+    "@sipe-team/typography": "workspace:^",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
@@ -35,16 +35,14 @@
     "@storybook/react-vite": "catalog:",
     "@storybook/test": "catalog:",
     "@types/react": "^18.3.12",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
     "@vanilla-extract/css": "catalog:",
-    "happy-dom": "catalog:",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "storybook": "catalog:",
     "tsup": "catalog:",
     "typescript": "catalog:",
-    "vitest": "catalog:"
+    "vitest": "catalog:",
+    "vitest-browser-react": "catalog:"
   },
   "peerDependencies": {
     "react": ">= 18",

packages/avatar/src/Avatar.test.tsx

@@ -1,30 +1,31 @@
 import { faker } from '@faker-js/faker';
-import { render, screen } from '@testing-library/react';
 import { describe, expect, it, test } from 'vitest';
+import { render } from 'vitest-browser-react';
 import { Avatar, type AvatarShape, type AvatarSize } from './Avatar';
 
 const testImage = faker.image.avatar();
 
-test('Avatar 컴포넌트가 주입받은 이미지 주소를 src 속성으로 설정한다.', () => {
-  render(<Avatar src={testImage} alt="대체 텍스트" />);
+test('Avatar 컴포넌트가 주입받은 이미지 주소를 src 속성으로 설정한다.', async () => {
+  const screen = render(<Avatar src={testImage} alt="대체 텍스트" />);
 
   const img = screen.getByRole('img');
-  expect(img).toHaveAttribute('src', testImage);
+
+  await expect.element(img).toHaveAttribute('src', testImage);
 });
 
-test('이미지가 없을 경우 대체 텍스트를 표시한다.', () => {
-  render(<Avatar alt="대체 텍스트" />);
+test('이미지가 없을 경우 대체 텍스트를 표시한다.', async () => {
+  const screen = render(<Avatar alt="대체 텍스트" />);
 
-  expect(screen.getByText('대체 텍스트')).toBeInTheDocument();
+  await expect.element(screen.getByText('대체 텍스트')).toBeVisible();
 });
 
-test('이미지 로드 실패 시 fallback을 표시한다.', () => {
-  render(<Avatar src="broken-link" fallback="https://randomuser.me/api/portraits/women/1.jpg" />);
+test('이미지 로드 실패 시 fallback을 표시한다.', async () => {
+  const fallbackSrc = 'https://randomuser.me/api/portraits/women/1.jpg';
+  const screen = render(<Avatar src="broken-link" fallback={fallbackSrc} />);
 
   const img = screen.getByRole('img');
-  img.dispatchEvent(new Event('error'));
 
-  expect(img).toHaveAttribute('src', 'https://randomuser.me/api/portraits/women/1.jpg');
+  await expect.element(img).toHaveAttribute('src', fallbackSrc);
 });
 
 describe('Avatar 컴포넌트', () => {
@@ -42,18 +43,28 @@ describe('Avatar 컴포넌트', () => {
     { shape: 'square', expectedRadius: '0px' },
   ];
 
-  it.each(sizes)('size가 $size일때 $expectedSize x $expectedSize 크기로 렌더링 된다.', ({ size, expectedSize }) => {
-    render(<Avatar src={testImage} size={size} />);
-    const container = screen.getByRole('img').parentElement;
-    expect(container).toHaveStyle({
-      width: expectedSize,
-      height: expectedSize,
-    });
-  });
-
-  it.each(shapes)('shape가 $shape일때 borderRadius는 $expectedRadius로 나타난다.', ({ shape, expectedRadius }) => {
-    render(<Avatar src={testImage} shape={shape} />);
-    const container = screen.getByRole('img').parentElement;
-    expect(container).toHaveStyle({ borderRadius: expectedRadius });
-  });
+  it.each(sizes)(
+    'size가 $size일때 $expectedSize x $expectedSize 크기로 렌더링 된다.',
+    async ({ size, expectedSize }) => {
+      const screen = render(<Avatar data-testid="avatar" src={testImage} size={size} />);
+
+      const container = screen.getByTestId('avatar');
+
+      await expect.element(container).toHaveStyle({
+        width: expectedSize,
+        height: expectedSize,
+      });
+    },
+  );
+
+  it.each(shapes)(
+    'shape가 $shape일때 borderRadius는 $expectedRadius로 나타난다.',
+    async ({ shape, expectedRadius }) => {
+      const screen = render(<Avatar data-testid="avatar" src={testImage} shape={shape} />);
+
+      const container = screen.getByTestId('avatar');
+
+      await expect.element(container).toHaveStyle({ borderRadius: expectedRadius });
+    },
+  );
 });

packages/avatar/vitest.config.ts

@@ -5,7 +5,12 @@ export default mergeConfig(
   defaultConfig,
   defineProject({
     test: {
-      setupFiles: './vitest.setup.ts',
+      browser: {
+        enabled: true,
+        headless: true,
+        provider: 'playwright',
+        instances: [{ browser: 'chromium' }],
+      },
     },
   }),
 );

packages/badge/package.json

@@ -33,18 +33,16 @@
     "@storybook/react": "catalog:",
     "@storybook/react-vite": "catalog:",
     "@storybook/test": "catalog:",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
     "@types/react": "^18.3.12",
     "@vanilla-extract/css": "catalog:",
-    "happy-dom": "catalog:",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sanitize.css": "^13.0.0",
     "storybook": "catalog:",
     "tsup": "catalog:",
     "typescript": "catalog:",
-    "vitest": "catalog:"
+    "vitest": "catalog:",
+    "vitest-browser-react": "catalog:"
   },
   "peerDependencies": {
     "react": ">= 18",

packages/badge/src/Badge.test.tsx

@@ -1,83 +1,83 @@
-import { render, screen } from '@testing-library/react';
+import { color as colorToken } from '@sipe-team/tokens';
 import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-react';
 import { Badge } from './Badge';
-import { color as colorToken } from '@sipe-team/tokens';
 
-test('children으로 입력한 텍스트를 표시한다.', () => {
-  render(<Badge>테스트</Badge>);
+test('children으로 입력한 텍스트를 표시한다.', async () => {
+  const screen = render(<Badge>테스트</Badge>);
 
-  expect(screen.getByText('테스트')).toBeInTheDocument();
+  await expect.element(screen.getByText('테스트')).toBeInTheDocument();
 });
 
-test('모서리가 8px radius 형태이다.', () => {
-  render(<Badge>테스트</Badge>);
+test('모서리가 8px radius 형태이다.', async () => {
+  const screen = render(<Badge>테스트</Badge>);
 
-  expect(screen.getByRole('status')).toHaveStyle({ borderRadius: '8px' });
+  await expect.element(screen.getByRole('status')).toHaveStyle({ borderRadius: '8px' });
 });
 
-test(`글꼴 색상은 cyan300(${colorToken.cyan300})이다.`, () => {
-  render(<Badge>테스트</Badge>);
+test(`글꼴 색상은 cyan300(${colorToken.cyan300})이다.`, async () => {
+  const screen = render(<Badge>테스트</Badge>);
 
-  expect(screen.getByText('테스트')).toHaveStyle({ color: colorToken.cyan300 });
+  await expect.element(screen.getByText('테스트')).toHaveStyle({ color: colorToken.cyan300 });
 });
 
-test('글꼴 두께는 semiBold(600)이다.', () => {
-  render(<Badge>테스트</Badge>);
+test('글꼴 두께는 semiBold(600)이다.', async () => {
+  const screen = render(<Badge>테스트</Badge>);
 
-  expect(screen.getByText('테스트')).toHaveStyle({ fontWeight: 600 });
+  await expect.element(screen.getByText('테스트')).toHaveStyle({ fontWeight: '600' });
 });
 
-test(`variant를 주입하지 않으면 filled(${colorToken.cyan900})를 기본 형태로 설정한다.`, () => {
-  render(<Badge>테스트</Badge>);
+test(`variant를 주입하지 않으면 filled(${colorToken.cyan900})를 기본 형태로 설정한다.`, async () => {
+  const screen = render(<Badge>테스트</Badge>);
 
-  expect(screen.getByRole('status')).toHaveStyle({
+  await expect.element(screen.getByRole('status')).toHaveStyle({
     backgroundColor: colorToken.cyan900,
   });
 });
 
-test('variant가 weak인 경우 배경색 gray200로 형태를 적용한다.', () => {
-  render(<Badge variant="weak">테스트</Badge>);
+test('variant가 weak인 경우 배경색 gray200로 형태를 적용한다.', async () => {
+  const screen = render(<Badge variant="weak">테스트</Badge>);
 
-  expect(screen.getByRole('status')).toHaveStyle({
+  await expect.element(screen.getByRole('status')).toHaveStyle({
     backgroundColor: colorToken.gray200,
   });
 });
 
-test('variant가 outline인 경우 배경색은 투명, 테두리는 2px 두께의 cyan900 색상 형태를 적용한다.', () => {
-  render(<Badge variant="outline">테스트</Badge>);
+test('variant가 outline인 경우 배경색은 투명, 테두리는 2px 두께의 cyan900 색상 형태를 적용한다.', async () => {
+  const screen = render(<Badge variant="outline">테스트</Badge>);
 
-  expect(screen.getByRole('status')).toHaveStyle({
+  await expect.element(screen.getByRole('status')).toHaveStyle({
     backgroundColor: 'transparent',
     border: `2px solid ${colorToken.cyan900}`,
   });
 });
 
-test('size를 주입하지 않으면 medium(상하 패딩 8px, 좌우 패딩 16px)을 기본 크기로 설정한다.', () => {
-  render(<Badge>테스트</Badge>);
+test('size를 주입하지 않으면 medium(상하 패딩 8px, 좌우 패딩 16px)을 기본 크기로 설정한다.', async () => {
+  const screen = render(<Badge>테스트</Badge>);
 
-  expect(screen.getByRole('status')).toHaveStyle({
+  await expect.element(screen.getByRole('status')).toHaveStyle({
     paddingTop: '8px',
     paddingBottom: '8px',
     paddingLeft: '16px',
     paddingRight: '16px',
   });
 });
 
-test('size가 small인 경우 상하 패딩 4px, 좌우 패딩 8px 형태를 적용한다.', () => {
-  render(<Badge size="small">테스트</Badge>);
+test('size가 small인 경우 상하 패딩 4px, 좌우 패딩 8px 형태를 적용한다.', async () => {
+  const screen = render(<Badge size="small">테스트</Badge>);
 
-  expect(screen.getByRole('status')).toHaveStyle({
+  await expect.element(screen.getByRole('status')).toHaveStyle({
     paddingTop: '4px',
     paddingBottom: '4px',
     paddingLeft: '8px',
     paddingRight: '8px',
   });
 });
 
-test('size가 large인 경우 상하 패딩 12px, 좌우 패딩 24px 형태를 적용한다.', () => {
-  render(<Badge size="large">테스트</Badge>);
+test('size가 large인 경우 상하 패딩 12px, 좌우 패딩 24px 형태를 적용한다.', async () => {
+  const screen = render(<Badge size="large">테스트</Badge>);
 
-  expect(screen.getByRole('status')).toHaveStyle({
+  await expect.element(screen.getByRole('status')).toHaveStyle({
     paddingTop: '12px',
     paddingBottom: '12px',
     paddingLeft: '24px',

packages/badge/vitest.config.ts

@@ -5,7 +5,12 @@ export default mergeConfig(
   defaultConfig,
   defineProject({
     test: {
-      setupFiles: './vitest.setup.ts',
+      browser: {
+        enabled: true,
+        headless: true,
+        provider: 'playwright',
+        instances: [{ browser: 'chromium' }],
+      },
     },
   }),
 );

packages/button/package.json

@@ -34,18 +34,16 @@
     "@storybook/react": "catalog:",
     "@storybook/react-vite": "catalog:",
     "@storybook/test": "catalog:",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
     "@types/react": "^18.3.12",
     "@vanilla-extract/css": "catalog:",
-    "happy-dom": "catalog:",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sanitize.css": "^13.0.0",
     "storybook": "catalog:",
     "tsup": "catalog:",
     "typescript": "catalog:",
-    "vitest": "catalog:"
+    "vitest": "catalog:",
+    "vitest-browser-react": "catalog:"
   },
   "peerDependencies": {
     "react": ">= 18",