Merge pull request #66 from netzwerg/56-upgrade-to-yarn-pnp

Use Yarn 3 with Plug'n'Play

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx -p yarpm yarpm-yarn lint-staged && npx tsc && npx -p yarpm yarpm-yarn run lint
+yarn lint-staged && yarn tsc && yarn run lint

.yarnrc.yml

@@ -1,2 +1,2 @@
-yarnPath: .yarn/releases/yarn-3.2.2.cjs
-nodeLinker: node-modules
+yarnPath: .yarn/releases/yarn-3.3.1.cjs
+nodeLinker: pnp

README.adoc

@@ -18,7 +18,8 @@ Deployed live version: ✨ https://netzwerg.github.io/react-you-do-you ✨
 *** Test watcher
 *** Optimized production build
 *** see <<scripts, Available Scripts>>
-** https://www.typescriptlang.org/[TypeScript 4.5] for compile-time safety
+** https://yarnpkg.com/features/pnp[Yarn 3] (with Plug'n'Play i.e. without `node_modules`)
+** https://www.typescriptlang.org/[TypeScript 4.9] for compile-time safety
 ** https://prettier.io[Prettier] for formatting, auto-triggered on commit via https://github.com/typicode/husky[Husky]
 ** https://redux-toolkit.js.org[Redux Toolkit] for state management
 ** https://material-ui.com/[Material UI 5] component library (using https://www.tss-react.dev[tss-react] for type-safe CSS)
@@ -97,8 +98,6 @@ yarn install
 yarn start
 ----
 
-_Feel free to use `npm` rather than `yarn` – I have a slight preference for `yarn`, mainly because of https://yarnpkg.com/lang/en/docs/selective-version-resolutions/[resolutions] support_
-
 === As Project Template
 
 * Rename root folder to `my-fancy-new-project-name`
@@ -138,4 +137,4 @@ Runs ESLint (with TypeScript support) on all `&#42;.ts` or `&#42;.tsx` files in
 
 Runs Storybook
 
-&copy; Rahel Lüthy 2019-2022 link:LICENSE[MIT License]
+&copy; Rahel Lüthy 2019 - 2023 link:LICENSE[MIT License]

package.json

@@ -59,50 +59,57 @@
     ]
   },
   "dependencies": {
-    "@emotion/cache": "^11.9.3",
-    "@emotion/react": "^11.9.3",
-    "@emotion/styled": "^11.9.3",
-    "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.9.2",
-    "@reduxjs/toolkit": "^1.8.3",
+    "@emotion/cache": "^11.10.5",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/icons-material": "^5.11.0",
+    "@mui/material": "^5.11.4",
+    "@reduxjs/toolkit": "^1.9.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-redux": "8.0.2",
-    "tss-react": "^3.7.1"
+    "react-redux": "8.0.5",
+    "tss-react": "^4.5.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.9",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/builder-vite": "^0.2.2",
-    "@storybook/node-logger": "^6.5.9",
-    "@storybook/react": "^6.5.9",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
+    "@babel/core": "^7.20.12",
+    "@storybook/addon-actions": "^6.5.15",
+    "@storybook/addon-backgrounds": "^6.5.15",
+    "@storybook/addon-docs": "^6.5.15",
+    "@storybook/addon-essentials": "^6.5.15",
+    "@storybook/addon-links": "^6.5.15",
+    "@storybook/addon-measure": "^6.5.15",
+    "@storybook/addon-outline": "^6.5.15",
+    "@storybook/builder-vite": "^0.2.7",
+    "@storybook/client-api": "^6.5.15",
+    "@storybook/client-logger": "^6.5.15",
+    "@storybook/node-logger": "^6.5.15",
+    "@storybook/react": "^6.5.15",
+    "@testing-library/dom": "^8.19.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.3.0",
-    "@types/jest": "^28.1.6",
-    "@types/node": "18.6.1",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
-    "@types/react-redux": "7.1.24",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.2.5",
+    "@types/node": "18.11.18",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@types/react-redux": "7.1.25",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@vitejs/plugin-react": "^2.0.0",
-    "babel-loader": "^8.2.5",
-    "eslint": "^8.20.0",
+    "@vitejs/plugin-react": "^3.0.1",
+    "babel-loader": "^9.1.2",
+    "eslint": "^8.31.0",
     "eslint-config-react-app": "^7.0.1",
-    "husky": "^8.0.1",
-    "jsdom": "^20.0.0",
-    "lint-staged": "13.0.3",
-    "node-fetch": "^3.2.9",
-    "prettier": "2.7.1",
-    "prettier-plugin-packagejson": "2.2.18",
-    "storybook-dark-mode": "^1.1.0",
-    "typescript": "^4.7.4",
-    "vite": "^3.0.3",
-    "vite-plugin-checker": "^0.4.9",
-    "vitest": "^0.19.1"
+    "husky": "^8.0.3",
+    "jsdom": "^21.0.0",
+    "lint-staged": "13.1.0",
+    "node-fetch": "^3.3.0",
+    "prettier": "2.8.2",
+    "prettier-plugin-packagejson": "2.3.0",
+    "storybook-dark-mode": "^2.0.5",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.4",
+    "vite-plugin-checker": "^0.5.3",
+    "vitest": "^0.27.1"
   },
-  "packageManager": "yarn@3.2.2"
+  "packageManager": "yarn@3.3.1"
 }

src/chat/components/ChatHistory.test.tsx

@@ -1,13 +1,8 @@
 import { render, screen } from '../../test/test-utils'
 import { ChatHistory } from './ChatHistory'
 import { noOp } from '../../utils'
-import { createTheme, ThemeProvider } from '@mui/material'
 
-it('renders without crashing', () => {
-  render(
-    <ThemeProvider theme={createTheme()}>
-      <ChatHistory messages={[{ text: 'Test Message', timestamp: 0 }]} onDeleteMessage={noOp} />
-    </ThemeProvider>
-  )
-  expect(screen.getByText('Test Message')).toBeInTheDocument()
+it('renders without crashing', async () => {
+  await render(<ChatHistory messages={[{ text: 'Test Message', timestamp: 0 }]} onDeleteMessage={noOp} />)
+  expect(await screen.findByText('Test Message')).toBeInTheDocument()
 })

src/chat/components/ChatInput.test.tsx

@@ -1,27 +1,29 @@
 import { vi } from 'vitest'
-import { screen, setup } from '../../test/test-utils'
+import { render, screen } from '../../test/test-utils'
 import { ChatInput } from './ChatInput'
 import { noOp } from '../../utils'
 import { createTheme, ThemeProvider } from '@mui/material'
+import userEvent from '@testing-library/user-event'
+import { act } from '@testing-library/react'
 
 it('renders without crashing', async () => {
   const onAddMessageMock = vi.fn()
 
-  const { user } = setup(
+  render(
     <ThemeProvider theme={createTheme()}>
       <ChatInput onAddMessage={onAddMessageMock} onFetchAsyncMessage={noOp} onAlert={noOp} />
     </ThemeProvider>
   )
 
-  const input = screen.getByRole('textbox')
+  const input = await screen.findByRole('textbox')
 
   expect(input).toBeInTheDocument()
 
-  await user.type(input, 'My custom Message')
+  await act(() => userEvent.type(input, 'My custom Message'))
 
   expect(input).toHaveValue('My custom Message')
 
-  await user.type(input, '{Enter}')
+  await act(() => userEvent.type(input, '{Enter}'))
 
   expect(input).toHaveValue('')