chore(components): RTL에 jestMatcher, userEvent 셋업

Author: seongbin9786

.pnp.cjs

@@ -20,6 +20,12 @@ packageExtensions:
     dependencies:
       "@babel/plugin-syntax-flow": "*"
       "@babel/plugin-transform-react-jsx": "*"
+  "@testing-library/user-event@*":
+    dependencies:
+      "@testing-library/dom": "*"
+  "eslint-plugin-jest-dom@*":
+    dependencies:
+      "@testing-library/dom": "*"
   # No matching package in the dependency tree; you may not need this rule anymore.
   # eslint-plugin-i@*: 
   #   dependencies:

.yarn/cache/@testing-library-jest-dom-npm-5.17.0-a702605ee4-9f28dbca8b.zip

@@ -1,3 +1,6 @@
 module.exports = {
     extends: ['@commitlint/config-conventional'],
+    rules: {
+        'subject-case': [0],
+    },
 };

.yarn/cache/@testing-library-user-event-npm-14.4.3-2d1a75355f-852c48ea6d.zip

@@ -3,6 +3,8 @@ module.exports = {
         'plugin:react/recommended',
         'plugin:react/jsx-runtime',
         'plugin:react-hooks/recommended',
+        'plugin:testing-library/react',
+        'plugin:jest-dom/recommended',
     ],
     parserOptions: {
         ecmaFeatures: {
@@ -13,8 +15,18 @@ module.exports = {
         react: {
             version: 'detect',
         },
+        'import/resolver': {
+            typescript: {
+                // ESLint의 실행 기준이 root임
+                project: './components/tsconfig.json',
+            },
+        },
     },
-    plugins: ['react-refresh'],
+    plugins: [
+        'testing-library',
+        'jest-dom',
+        'react-refresh'
+    ],
     rules: {
         'react-refresh/only-export-components': 'warn',
     },

.yarn/cache/@types-jsdom-npm-20.0.1-5bb899e006-d55402c525.zip

@@ -1,12 +1,26 @@
-import { render, screen, within } from '@testing-library/react';
+import App from '@src/App';
+import Home from '@src/Home';
+import { screen, within } from '@testing-library/react';
 import { expect, test } from 'vitest';
 
-import Home from '../src/Home';
+import { testRender } from './utilities';
 
-test('Example', () => {
-    render(<Home />);
+test('Home', () => {
+    testRender(<Home />);
     const main = within(screen.getByRole('main'));
-    expect(
-        main.getByRole('heading', { level: 1, name: /welcome to next\.js!/i }),
-    ).toBeDefined();
+    const h1 = main.getByRole('heading', {
+        level: 1,
+        name: /welcome to next\.js!/i,
+    });
+
+    expect(h1).toBeInTheDocument();
+});
+
+test('App', async () => {
+    const { testUser } = testRender(<App />);
+    const button = screen.getByRole('button');
+
+    await testUser.click(button);
+
+    expect(button).toHaveTextContent('count is 1');
 });

.yarn/cache/@types-tough-cookie-npm-4.0.2-9e61f877e6-e055556ffd.zip

@@ -0,0 +1,4 @@
+import matchers from '@testing-library/jest-dom/matchers';
+import { expect } from 'vitest';
+
+expect.extend(matchers);

.yarn/cache/acorn-globals-npm-7.0.1-97c48c0140-2a2998a547.zip

@@ -0,0 +1,12 @@
+import { render as renderComponent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { ReactElement } from 'react';
+
+type RenderOptions = Parameters<typeof renderComponent>[1];
+
+export const testRender = (ui: ReactElement, options?: RenderOptions) => {
+    return {
+        ...renderComponent(ui, options),
+        testUser: userEvent.setup(),
+    };
+};

.yarn/cache/cssom-npm-0.3.8-a9291d36ff-24beb3087c.zip

@@ -27,22 +27,30 @@
         "@storybook/react": "^7.0.24",
         "@storybook/react-vite": "^7.0.24",
         "@storybook/testing-library": "^0.0.14-next.2",
+        "@testing-library/dom": "^9.3.1",
+        "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^14.0.0",
+        "@testing-library/user-event": "^14.4.3",
         "@types/react": "^18.0.37",
         "@types/react-dom": "^18.0.11",
+        "@types/testing-library__jest-dom": "^5.14.8",
         "@vitejs/plugin-react": "^4.0.0",
         "@vitest/coverage-v8": "^0.33.0",
         "eslint": "*",
         "eslint-config-react-app": "^7.0.1",
+        "eslint-plugin-jest-dom": "^5.0.1",
         "eslint-plugin-react": "^7.32.2",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.3.4",
         "eslint-plugin-storybook": "^0.6.12",
+        "eslint-plugin-testing-library": "^5.11.0",
+        "jest-environment-jsdom": "^29.6.1",
         "jsdom": "^22.1.0",
         "prop-types": "^15.8.1",
         "storybook": "^7.0.24",
         "typescript": "*",
         "vite": "^4.3.9",
+        "vite-tsconfig-paths": "^4.2.0",
         "vitest": "^0.33.0"
     }
 }

.yarn/cache/cssom-npm-0.5.0-44ab2704f2-823471aa30.zip

@@ -1,7 +1,6 @@
 import './index.css';
 
+import App from '@src/App';
 import { createRoot } from 'react-dom/client';
 
-import App from './App.tsx';
-
 createRoot(document.getElementById('root') as HTMLElement).render(<App />);

.yarn/cache/cssstyle-npm-2.3.0-b5d112c450-5f05e6fd2e.zip

@@ -21,7 +21,7 @@ export const LoggedOut: Story = {};
 export const LoggedIn: Story = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
-        const loginButton = await canvas.getByRole('button', {
+        const loginButton = canvas.getByRole('button', {
             name: /Log in/i,
         });
         await userEvent.click(loginButton);

.yarn/cache/data-urls-npm-3.0.2-c8b2050319-033fc3dd0f.zip

@@ -7,7 +7,10 @@
         /* Bundler mode */
         "resolveJsonModule": true,
         "isolatedModules": true,
-        "jsx": "react-jsx"
+        "jsx": "react-jsx",
+        "paths": {
+            "@src/*": ["./src/*"]
+        }
     },
     "include": ["**/*.ts", "**/*.tsx"]
 }

.yarn/cache/eslint-plugin-jest-dom-npm-5.0.1-ac102ffff6-aad1ccae29.zip

@@ -1,6 +1,9 @@
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
 
-export default defineConfig({
-    plugins: [react()],
-});
+const config = {
+    plugins: [react(), tsconfigPaths()],
+};
+
+export default defineConfig(config);

.yarn/cache/globrex-npm-0.1.2-ddda94f2d0-adca162494.zip

@@ -1,12 +1,13 @@
-import react from '@vitejs/plugin-react';
-import { defineConfig, type UserConfig } from 'vite';
-import type { InlineConfig } from 'vitest';
+import path from 'node:path';
 
-type ViteConfig = UserConfig & { test: InlineConfig };
+import react from '@vitejs/plugin-react';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import { defineConfig } from 'vitest/config';
 
-const config: ViteConfig = {
-    plugins: [react()],
+const config = {
+    plugins: [react(), tsconfigPaths()],
     test: {
+        setupFiles: path.resolve(__dirname, './__tests__/setup.ts'),
         environment: 'jsdom',
     },
 };