#48 Upgrade MSW (#56)

* #48 upgrade msw

* #48 upgrade deps

* #48 upgrade deps

* #48 test wrappers

Author: mwarman

package-lock.json

@@ -22,51 +22,51 @@
     "test:ci": "vitest run --coverage --silent"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "2.13.5",
+    "@codesandbox/sandpack-react": "2.14.0",
     "@leanstacks/react-common": "1.0.0",
     "@react-spring/web": "9.7.3",
-    "@tanstack/react-query": "5.24.1",
-    "@tanstack/react-query-devtools": "5.24.1",
-    "@tanstack/react-table": "8.14.0",
-    "axios": "1.6.7",
+    "@tanstack/react-query": "5.40.1",
+    "@tanstack/react-query-devtools": "5.40.1",
+    "@tanstack/react-table": "8.17.3",
+    "axios": "1.7.2",
     "classnames": "2.5.1",
-    "dayjs": "1.11.10",
-    "formik": "2.4.5",
+    "dayjs": "1.11.11",
+    "formik": "2.4.6",
     "i18next": "23.11.5",
     "i18next-browser-languagedetector": "8.0.0",
     "lodash": "4.17.21",
-    "qs": "6.11.2",
+    "qs": "6.12.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-i18next": "14.1.2",
-    "react-router-dom": "6.22.1",
-    "tailwindcss": "3.4.1",
+    "react-router-dom": "6.23.1",
+    "tailwindcss": "3.4.3",
     "uuid": "9.0.1",
-    "yup": "1.3.3"
+    "yup": "1.4.0"
   },
   "devDependencies": {
-    "@testing-library/react": "15.0.7",
+    "@testing-library/react": "16.0.0",
     "@testing-library/user-event": "14.5.2",
-    "@types/lodash": "4.14.202",
-    "@types/qs": "6.9.11",
-    "@types/react": "18.3.2",
+    "@types/lodash": "4.17.4",
+    "@types/qs": "6.9.15",
+    "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@types/uuid": "9.0.8",
-    "@typescript-eslint/eslint-plugin": "7.9.0",
-    "@typescript-eslint/parser": "7.9.0",
-    "@vitejs/plugin-react": "4.2.1",
+    "@typescript-eslint/eslint-plugin": "7.12.0",
+    "@typescript-eslint/parser": "7.12.0",
+    "@vitejs/plugin-react": "4.3.0",
     "@vitest/coverage-v8": "1.6.0",
     "autoprefixer": "10.4.19",
     "eslint": "8.57.0",
     "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-react-refresh": "0.4.7",
-    "jsdom": "24.0.0",
-    "msw": "1.3.2",
+    "jsdom": "24.1.0",
+    "msw": "2.3.1",
     "postcss": "8.4.38",
-    "prettier": "3.2.5",
-    "prettier-plugin-tailwindcss": "0.5.11",
-    "typescript": "5.2.2",
-    "vite": "5.2.11",
+    "prettier": "3.3.0",
+    "prettier-plugin-tailwindcss": "0.6.1",
+    "typescript": "5.4.5",
+    "vite": "5.2.12",
     "vitest": "1.6.0"
   }
 }

package.json

@@ -2,6 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import dayjs from 'dayjs';
 
 import { renderHook, waitFor } from 'test/test-utils';
+import WithQueryClientProvider from 'test/wrappers/WithQueryClientProvider';
 import storage from 'utils/storage';
 import { userTokensFixture } from '__fixtures__/tokens';
 
@@ -37,8 +38,9 @@ describe('useGetTokens', () => {
       expires_at: dayjs('2024-01-01').toISOString(),
     };
     getItemSpy.mockReturnValue(JSON.stringify(token));
-    const { result } = renderHook(() => useGetUserTokens());
-    await waitFor(() => expect(result.current.error).toBeDefined());
+    // use a specific wrapper to avoid test side effects from "AuthProvider"
+    const { result } = renderHook(() => useGetUserTokens(), { wrapper: WithQueryClientProvider });
+    await waitFor(() => expect(result.current.isError).toBe(true));
 
     // ASSERT
     expect(result.current.error).toBeInstanceOf(Error);
@@ -47,8 +49,9 @@ describe('useGetTokens', () => {
   it('should error if token is not found', async () => {
     // ARRANGE
     getItemSpy.mockReturnValue(null);
-    const { result } = renderHook(() => useGetUserTokens());
-    await waitFor(() => expect(result.current.error).toBeDefined());
+    // use a specific wrapper to avoid test side effects from "AuthProvider"
+    const { result } = renderHook(() => useGetUserTokens(), { wrapper: WithQueryClientProvider });
+    await waitFor(() => expect(result.current.isError).toBe(true));
 
     // ASSERT
     expect(result.current.error).toBeInstanceOf(Error);

src/api/__tests__/useGetUserTokens.test.ts

@@ -1,25 +1,25 @@
-import { rest } from 'msw';
+import { HttpResponse, http } from 'msw';
 import filter from 'lodash/filter';
 import find from 'lodash/find';
 
 import { usersFixture } from '__fixtures__/users';
 import { todosFixture } from '__fixtures__/todos';
 
 export const handlers = [
-  rest.get('https://jsonplaceholder.typicode.com/users', (_req, res, ctx) => {
-    return res(ctx.json(usersFixture));
+  http.get('https://jsonplaceholder.typicode.com/users', () => {
+    return HttpResponse.json(usersFixture);
   }),
-  rest.get('https://jsonplaceholder.typicode.com/users/:userId', (req, res, ctx) => {
-    const { userId } = req.params;
+  http.get('https://jsonplaceholder.typicode.com/users/:userId', ({ params }) => {
+    const { userId } = params;
     const user = find(usersFixture, { id: Number(userId) });
     if (user) {
-      return res(ctx.json(user));
+      return HttpResponse.json(user);
     }
-    return res(ctx.status(404));
+    return new HttpResponse(null, { status: 404 });
   }),
-  rest.get('https://jsonplaceholder.typicode.com/users/:userId/todos', (req, res, ctx) => {
-    const { userId } = req.params;
+  http.get('https://jsonplaceholder.typicode.com/users/:userId/todos', ({ params }) => {
+    const { userId } = params;
     const todos = filter(todosFixture, { userId: Number(userId) });
-    return res(ctx.json(todos));
+    return HttpResponse.json(todos);
   }),
 ];

src/test/mocks/handlers.ts

@@ -8,7 +8,7 @@ import {
 } from '@testing-library/react';
 
 import 'utils/i18n';
-import WithAllProviders from './WithAllProviders';
+import WithAllProviders from './wrappers/WithAllProviders';
 
 const customRender = (ui: React.ReactElement, options?: RenderOptions, { route = '/' } = {}) => {
   window.history.pushState({}, 'Test page', route);

src/test/test-utils.tsx

@@ -6,8 +6,33 @@ import SettingsContextProvider from 'providers/SettingsProvider';
 import AuthContextProvider from 'providers/AuthProvider';
 import ToastsProvider from 'providers/ToastsProvider';
 
-import { queryClient } from './query-client';
+import { queryClient } from '../query-client';
 
+/**
+ * A React test wrapper. Wraps the component under test with a bespoke set
+ * of React components, typically providers.
+ *
+ * This test wrapper includes all of the providers except the Router.
+ *
+ * This component is useful when you want to render your own router component
+ * as part of the test. For example, to test that some specific navigation is
+ * triggered.
+ *
+ * Example:
+ * ```
+ * render(
+ *   <MemoryRouter>
+ *     <Routes>
+ *       <Route path="/" element={<MyForm />} />
+ *       <Route path="/route/under/test" element={<div data-testid="test-navigation" />} />
+ *     </Routes>
+ *   </MemoryRouter>,
+ *   { wrapper: AllProvidersExceptRouter },
+ * );
+ * ```
+ * @param {PropsWithChildren} props - Component properties.
+ * @returns {JSX.Element} JSX
+ */
 const AllProvidersExceptRouter = ({ children }: PropsWithChildren): JSX.Element => {
   return (
     <ConfigContextProvider>

src/test/AllProvidersExceptRouter.tsx renamed to src/test/wrappers/AllProvidersExceptRouter.tsx

@@ -7,8 +7,16 @@ import SettingsContextProvider from 'providers/SettingsProvider';
 import AuthContextProvider from 'providers/AuthProvider';
 import ToastsProvider from 'providers/ToastsProvider';
 
-import { queryClient } from './query-client';
+import { queryClient } from '../query-client';
 
+/**
+ * The default React test wrapper. Wraps the component under test with a set
+ * of React components, typically providers.
+ *
+ * This test wrapper includes all of the providers used in the application.
+ * @param {PropsWithChildren} props - Component properties.
+ * @returns {JSX.Element} JSX
+ */
 const WithAllProviders = ({ children }: PropsWithChildren): JSX.Element => {
   return (
     <ConfigContextProvider>

src/test/WithAllProviders.tsx renamed to src/test/wrappers/WithAllProviders.tsx

@@ -0,0 +1,25 @@
+import { PropsWithChildren } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { QueryClientProvider } from '@tanstack/react-query';
+
+import { queryClient } from '../query-client';
+
+/**
+ * A React test wrapper. Wraps the component under test with a bespoke set
+ * of React components, typically providers.
+ *
+ * Wraps the component with the React Query `QueryClientProvider` and a router,
+ * but nothing more. Removes other providers to minimize side effects on the
+ * component under test.
+ * @param {PropsWithChildren} props - Component properties.
+ * @returns {JSX.Element} JSX
+ */
+const WithQueryClientProvider = ({ children }: PropsWithChildren): JSX.Element => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>{children}</MemoryRouter>
+    </QueryClientProvider>
+  );
+};
+
+export default WithQueryClientProvider;