[클린코드 리액트 3기 임대호] 장바구니 미션 Step2

.storybook/preview.ts

@@ -1,5 +1,5 @@
 import type { Preview } from '@storybook/react';
-import '../src/styles/index.css';
+import '../src/styles/global.css.ts';
 
 const preview: Preview = {
   parameters: {

__mocks__/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vitest/globals" />

__mocks__/zustand.ts

@@ -0,0 +1,44 @@
+import * as zustand from 'zustand';
+import { afterEach, vi } from 'vitest';
+import { act } from '@testing-library/react';
+
+const { create: actualCreate, createStore: actualCreateStore } =
+  await vi.importActual<typeof zustand>('zustand');
+
+// a variable to hold reset functions for all stores declared in the app
+export const storeResetFns = new Set<() => void>();
+
+// when creating a store, we get its initial state, create a reset function and add it in the set
+export const create = (<T>() => {
+  console.log('zustand create mock');
+
+  return (stateCreator: zustand.StateCreator<T>) => {
+    const store = actualCreate(stateCreator);
+    const initialState = store.getState();
+    storeResetFns.add(() => {
+      store.setState(initialState, true);
+    });
+    return store;
+  };
+}) as typeof zustand.create;
+
+// when creating a store, we get its initial state, create a reset function and add it in the set
+export const createStore = (<T>(stateCreator: zustand.StateCreator<T>) => {
+  console.log('zustand createStore mock');
+
+  const store = actualCreateStore(stateCreator);
+  const initialState = store.getState();
+  storeResetFns.add(() => {
+    store.setState(initialState, true);
+  });
+  return store;
+}) as typeof zustand.createStore;
+
+// reset all stores after each test run
+afterEach(() => {
+  act(() => {
+    storeResetFns.forEach((resetFn) => {
+      resetFn();
+    });
+  });
+});

package.json

@@ -9,18 +9,22 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "test": "vitest"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.28.6",
     "@tanstack/react-router": "^1.22.2",
+    "@tanstack/react-virtual": "^3.5.0",
     "@vanilla-extract/css": "^1.14.1",
     "@vanilla-extract/recipes": "^0.5.2",
+    "@vanilla-extract/sprinkles": "^1.6.2",
     "axios": "^1.6.8",
     "classnames": "^2.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "zod": "^3.22.4"
+    "zod": "^3.22.4",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.2.25",
@@ -35,6 +39,9 @@
     "@tanstack/react-query-devtools": "^5.28.6",
     "@tanstack/router-devtools": "^1.22.2",
     "@tanstack/router-vite-plugin": "^1.20.5",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react": "^18.2.64",
     "@types/react-dom": "^18.2.21",
     "@typescript-eslint/eslint-plugin": "^7.1.1",
@@ -46,11 +53,13 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "eslint-plugin-storybook": "^0.8.0",
+    "jsdom": "^24.0.0",
     "msw": "^2.2.10",
     "storybook": "^8.0.4",
     "typescript": "^5.2.2",
     "vite": "^5.1.6",
-    "vite-plugin-svgr": "^4.2.0"
+    "vite-plugin-svgr": "^4.2.0",
+    "vitest": "^1.6.0"
   },
   "msw": {
     "workerDirectory": [