Merge pull request #13 from nus3/update-test-library

Update test library

apps/react-swc-jest/package.json → apps/react-vitest/package.json

@@ -1,21 +1,22 @@
 {
-  "name": "react-swc-jest",
+  "name": "react-vitest",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "lint": "eslint ./ --ext ts,tsx,js,jsx",
-    "test": "jest",
+    "test": "vitest",
     "type-check": "tsc --noEmit",
     "storybook": "start-storybook -p 1234",
     "build-storybook": "build-storybook"
   },
   "dependencies": {
     "clsx": "1.1.1",
-    "react": "18.0.0",
-    "react-dom": "18.0.0"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@storybook/addon-docs": "6.5.6",
@@ -28,16 +29,17 @@
     "@storybook/testing-react": "1.3.0",
     "@swc/core": "1.2.194",
     "@swc/jest": "0.2.21",
-    "@testing-library/jest-dom": "5.16.4",
+    "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "13.3.0",
     "@testing-library/user-event": "14.2.0",
     "@types/jest": "27.5.1",
-    "@types/react": "18.0.0",
-    "@types/react-dom": "18.0.0",
+    "@types/react": "18.2.25",
+    "@types/react-dom": "18.2.25",
     "@typescript-eslint/eslint-plugin": "5.26.0",
     "@typescript-eslint/experimental-utils": "5.26.0",
     "@typescript-eslint/parser": "5.26.0",
-    "@vitejs/plugin-react": "1.3.0",
+    "@vitejs/plugin-react": "4.2.1",
+    "@vitest/ui": "1.5.0",
     "eslint": "8.16.0",
     "eslint-config-next": "12.1.6",
     "eslint-config-prettier": "8.5.0",
@@ -47,10 +49,12 @@
     "identity-obj-proxy": "3.0.0",
     "jest": "28.1.0",
     "jest-environment-jsdom": "28.1.0",
-    "msw": "0.44.2",
+    "jsdom": "24.0.0",
+    "msw": "2.2.13",
     "prettier": "2.6.2",
-    "typescript": "4.6.3",
-    "vite": "2.9.9",
+    "typescript": "5.2.2",
+    "vite": "5.2.8",
+    "vitest": "1.5.0",
     "whatwg-fetch": "3.6.2"
   }
 }

apps/react-swc-jest/src/api/__mocks__/example.ts → apps/react-vitest/src/api/__mocks__/example.ts

@@ -1,6 +1,8 @@
+import { vi } from 'vitest';
+
 import * as exampleApi from '../example';
 
-export const getExamples: typeof exampleApi.getExamples = jest.fn(async () => {
+export const getExamples: typeof exampleApi.getExamples = vi.fn(async () => {
   const res: exampleApi.GetExamplesResponse = await {
     examples: [
       { id: '1', name: 'nus1' },

apps/react-vitest/src/api/example.test.ts

@@ -0,0 +1,49 @@
+import { http, HttpResponse } from 'msw';
+import { setupServer } from 'msw/node';
+import {
+  afterAll,
+  afterEach,
+  describe,
+  test,
+  vi,
+  beforeAll,
+  expect
+} from 'vitest';
+
+import { getExamples } from './example';
+
+vi.unmock('./example');
+
+const mockHandlers = [
+  http.get('/examples', () => {
+    return HttpResponse.json(
+      {
+        examples: [
+          { id: '1', name: 'nus1' },
+          { id: '2', name: 'nus2' },
+          { id: '3', name: 'nus3' }
+        ]
+      },
+      { status: 200 }
+    );
+  })
+];
+
+const server = setupServer(...mockHandlers);
+
+describe('/examples', () => {
+  beforeAll(() => server.listen());
+  afterEach(() => server.resetHandlers());
+  afterAll(() => server.close());
+
+  test('should called get examples api', async () => {
+    const response = await getExamples();
+    expect(response).toStrictEqual({
+      examples: [
+        { id: '1', name: 'nus1' },
+        { id: '2', name: 'nus2' },
+        { id: '3', name: 'nus3' }
+      ]
+    });
+  });
+});

apps/react-swc-jest/src/components/Button/Button.test.tsx → apps/react-vitest/src/components/Button/Button.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { describe, test, vi, expect } from 'vitest';
 
 import { Button } from './Button';
 
@@ -10,7 +11,7 @@ describe('Button', () => {
   });
 
   test('should call onClick', async () => {
-    const onClickMock = jest.fn();
+    const onClickMock = vi.fn();
     render(<Button onClick={onClickMock}>label</Button>);
     await userEvent.click(screen.getByRole('button'));
 

apps/react-swc-jest/src/components/DateText/DateText.test.tsx → apps/react-vitest/src/components/DateText/DateText.test.tsx

@@ -1,16 +1,17 @@
 import { render, screen } from '@testing-library/react';
+import { describe, test, vi, expect } from 'vitest';
 
 import { DateText } from './DateText';
 
 describe('DateText', () => {
   test('should render date', () => {
-    jest.useFakeTimers();
-    jest.setSystemTime(new Date('1991/08/02').getTime());
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('1991/08/02').getTime());
 
     render(<DateText />);
     expect(screen.getByText('1991/08/02')).toBeInTheDocument();
 
-    jest.runOnlyPendingTimers();
-    jest.useRealTimers();
+    vi.runOnlyPendingTimers();
+    vi.useRealTimers();
   });
 });

apps/react-swc-jest/src/components/GetExamplesButton/GetExamplesButton.test.tsx → apps/react-vitest/src/components/GetExamplesButton/GetExamplesButton.test.tsx

@@ -1,5 +1,6 @@
 import { act, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { describe, test, vi, expect } from 'vitest';
 
 import { delayedResponse } from '../../../test/helpers/response';
 import { userEventSetup } from '../../../test/helpers/userEventSetup';
@@ -23,9 +24,9 @@ describe('GetExamplesButton', () => {
   test('should render loading', async () => {
     const user = userEventSetup();
 
-    jest.useFakeTimers();
+    vi.useFakeTimers();
 
-    jest.spyOn(exampleApi, 'getExamples').mockImplementation(() =>
+    vi.spyOn(exampleApi, 'getExamples').mockImplementation(() =>
       delayedResponse<exampleApi.GetExamplesResponse>(500, {
         examples: [
           { id: '1', name: 'nus1' },
@@ -40,11 +41,11 @@ describe('GetExamplesButton', () => {
 
     await screen.findByTestId('Loading');
     act(() => {
-      jest.advanceTimersByTime(500);
+      vi.advanceTimersByTime(500);
     });
     await waitFor(() => expect(screen.queryByTestId('Loading')).toBeNull());
 
-    jest.runOnlyPendingTimers();
-    jest.useFakeTimers();
+    vi.runOnlyPendingTimers();
+    vi.useFakeTimers();
   });
 });

apps/react-swc-jest/src/components/SelectBox/SelectBox.test.tsx → apps/react-vitest/src/components/SelectBox/SelectBox.test.tsx

@@ -1,5 +1,6 @@
 import { render, within, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { describe, test, vi, expect } from 'vitest';
 
 import { SelectBox } from './SelectBox';
 
@@ -124,7 +125,7 @@ describe('SelectBox', () => {
     { key: '{Enter}', keyName: 'Enter' },
     { key: ' ', keyName: 'Space' }
   ])('should call onClick props when $keyName key press', async ({ key }) => {
-    const onClickMock = jest.fn();
+    const onClickMock = vi.fn();
     render(<SelectBox onClick={onClickMock} />);
 
     await userEvent.keyboard(`{ArrowRight>3/}`);

apps/react-swc-jest/src/components/SelectBox/useFocus.test.ts → apps/react-vitest/src/components/SelectBox/useFocus.test.ts

@@ -1,4 +1,5 @@
 import { act, renderHook } from '@testing-library/react';
+import { describe, test, expect } from 'vitest';
 
 import { SELECT_BOX_VALUES } from './SelectBox';
 import { useFocus } from './useFocus';

apps/react-swc-jest/src/components/Toast/Toast.test.tsx → apps/react-vitest/src/components/Toast/Toast.test.tsx

@@ -1,5 +1,6 @@
 import { composeStories } from '@storybook/testing-react';
 import { act, render, screen } from '@testing-library/react';
+import { afterEach, describe, test, beforeEach, vi, expect } from 'vitest';
 
 import { userEventSetup } from '../../../test/helpers/userEventSetup';
 import { AUTO_CLOSE_TIME, Toast, TOAST_ANIMATION_TIME } from './Toast';
@@ -9,12 +10,12 @@ const { Default } = composeStories(ToastStories);
 
 describe('Toast', () => {
   beforeEach(() => {
-    jest.useFakeTimers();
+    vi.useFakeTimers();
   });
 
   afterEach(() => {
-    jest.runOnlyPendingTimers();
-    jest.useRealTimers();
+    vi.runOnlyPendingTimers();
+    vi.useRealTimers();
   });
 
   test('should be show and hide toast', async () => {
@@ -27,7 +28,7 @@ describe('Toast', () => {
     expect(screen.getByRole('alert')).toBeInTheDocument();
 
     act(() => {
-      jest.advanceTimersByTime(TOAST_ANIMATION_TIME + AUTO_CLOSE_TIME);
+      vi.advanceTimersByTime(TOAST_ANIMATION_TIME + AUTO_CLOSE_TIME);
     });
 
     expect(screen.queryByRole('alert')).toBeNull();
@@ -41,7 +42,7 @@ describe('Toast', () => {
     expect(screen.getByRole('alert')).toBeInTheDocument();
 
     act(() => {
-      jest.advanceTimersByTime(TOAST_ANIMATION_TIME + AUTO_CLOSE_TIME);
+      vi.advanceTimersByTime(TOAST_ANIMATION_TIME + AUTO_CLOSE_TIME);
     });
 
     expect(screen.queryByRole('alert')).toBeNull();

apps/react-swc-jest/src/hooks/useCounter.test.ts → apps/react-vitest/src/hooks/useCounter.test.ts

@@ -1,4 +1,5 @@
 import { act, renderHook } from '@testing-library/react';
+import { describe, test, expect } from 'vitest';
 
 import { useCounter } from './useCounter';
 

apps/react-swc-jest/src/hooks/useHash.test.ts → apps/react-vitest/src/hooks/useHash.test.ts

@@ -1,4 +1,5 @@
 import { renderHook, waitFor } from '@testing-library/react';
+import { describe, test, vi, expect } from 'vitest';
 
 import { useHash } from './useHash';
 
@@ -17,8 +18,8 @@ describe('useHash', () => {
   });
 
   test('should remove event listener when unmount', () => {
-    const addEventListenerMock = jest.spyOn(window, 'addEventListener');
-    const removeEventListenerMock = jest.spyOn(window, 'removeEventListener');
+    const addEventListenerMock = vi.spyOn(window, 'addEventListener');
+    const removeEventListenerMock = vi.spyOn(window, 'removeEventListener');
 
     const { unmount } = renderHook(() => useHash());
     expect(addEventListenerMock).toBeCalledWith(

apps/react-swc-jest/src/hooks/useName.test.ts → apps/react-vitest/src/hooks/useName.test.ts

@@ -1,11 +1,12 @@
 import { renderHook } from '@testing-library/react';
+import { describe, test, vi, expect } from 'vitest';
 
 import { useName } from './useName';
 
 describe('useName', () => {
   test('should remove event listener when unmount', () => {
-    const addEventListenerMock = jest.spyOn(document, 'addEventListener');
-    const removeEventListenerMock = jest.spyOn(document, 'removeEventListener');
+    const addEventListenerMock = vi.spyOn(document, 'addEventListener');
+    const removeEventListenerMock = vi.spyOn(document, 'removeEventListener');
 
     const { unmount } = renderHook(() => useName());
     expect(addEventListenerMock).toBeCalledWith('click', expect.any(Function));

apps/react-swc-jest/test/helpers/userEventSetup.ts → apps/react-vitest/test/helpers/userEventSetup.ts

@@ -1,4 +1,5 @@
 import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
 
 // REF: https://testing-library.com/docs/user-event/options#advancetimers
 /**
@@ -8,7 +9,7 @@ export function userEventSetup(
   options: Parameters<typeof userEvent['setup']>[0] = {}
 ): ReturnType<typeof userEvent['setup']> {
   return userEvent.setup({
-    advanceTimers: jest.advanceTimersByTime,
+    advanceTimers: vi.advanceTimersByTime,
     ...options
   });
 }