package updates, test tweaks

package.json

@@ -24,50 +24,48 @@
     "favicon": "ts-node-esm ./scripts/favicon.ts"
   },
   "dependencies": {
-    "@giphy/js-fetch-api": "^4.9.2",
-    "@radix-ui/react-select": "^1.2.1",
+    "@giphy/js-fetch-api": "^4.9.3",
+    "@radix-ui/react-select": "^1.2.2",
     "@yaireo/relative-time": "^1.0.3",
     "file-saver": "^2.0.5",
-    "framer-motion": "^10.9.1",
-    "lucide-react": "^0.127.0",
-    "next": "13.2.4",
+    "framer-motion": "^10.12.16",
+    "lucide-react": "^0.244.0",
+    "next": "13.4.6",
     "next-themes": "^0.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "remark": "^14.0.2",
+    "remark": "^14.0.3",
     "remark-gfm": "^3.0.1",
     "remark-html": "^15.0.2",
     "vcf": "^2.1.1"
   },
   "devDependencies": {
-    "@svgr/webpack": "^7.0.0",
+    "@svgr/webpack": "^8.0.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
-    "@types/jest": "^29.4.0",
+    "@types/jest": "^29.5.2",
     "@types/js-yaml": "^4.0.5",
-    "@types/sharp": "^0.31.1",
     "chalk": "^5.2.0",
-    "eslint": "^8.42.0",
-    "eslint-config-next": "^13.2.4",
-    "jest": "^29.4.2",
+    "eslint": "^8.43.0",
+    "eslint-config-next": "^13.4.6",
+    "jest": "^29.5.0",
     "jest-canvas-mock": "^2.5.1",
-    "jest-environment-jsdom": "^29.4.2",
+    "jest-environment-jsdom": "^29.5.0",
     "js-yaml": "^4.1.0",
     "ora": "^6.3.1",
     "prepend": "^1.0.2",
-    "prettier": "^2.8.6",
-    "sharp": "^0.32.0",
+    "prettier": "^2.8.8",
+    "sharp": "^0.32.1",
     "sharp-ico": "^0.1.5",
-    "slugify": "^1.6.5",
-    "stylelint": "^15.3.0",
-    "stylelint-config-prettier": "^9.0.4",
+    "slugify": "^1.6.6",
+    "stylelint": "^15.7.0",
     "stylelint-prettier": "^3.0.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.1.3"
   },
   "engines": {
-    "node": "18.x"
+    "node": ">=18.x"
   },
   "browserslist": [
     "> 0.2%",

src/components/404/index.test.tsx

@@ -1,14 +0,0 @@
-import { act, fireEvent, render, screen } from '@testing-library/react'
-import NotFound from '.'
-
-describe('404', () => {
-  it('renders correctly', async () => {
-    render(<NotFound />)
-    expect(screen.getByText(/Shenanigans, page not found./)).toBeInTheDocument()
-
-    await act(async () => {
-      const button = await screen.findByText(`Get another 'cat' gif`)
-      fireEvent.click(button)
-    })
-  })
-})

src/components/404/index.tsx

@@ -46,7 +46,13 @@ export default function NotFound() {
         {tag} gifs, entirely your choice.
       </p>
 
-      <video className="gif" src={gif} autoPlay loop />
+      <video
+        className="gif"
+        src={gif}
+        data-testid={gif || null}
+        autoPlay
+        loop
+      />
 
       <div>
         <Button onClick={handleClick}>{`Get another '${tag}' gif`}</Button>

src/components/Header/index.test.tsx

@@ -1,11 +1,9 @@
-import { act, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import Header from '.'
 
 describe('Header', () => {
   it('renders correctly', async () => {
-    await act(async () => {
-      render(<Header />)
-    })
+    render(<Header />)
 
     await screen.findByText('matthias kretschmann')
     await screen.findAllByText('Lisbon')

src/components/Meta/index.test.tsx

@@ -1,22 +1,20 @@
-import { act, render } from '@testing-library/react'
+import { render } from '@testing-library/react'
 import Meta from '.'
 
 describe('Meta', () => {
   it('renders without crashing', async () => {
-    await act(async () => {
-      render(<Meta title="Hello World" description="Hello" />, {
-        container: document.head
-      })
+    render(<Meta title="Hello World" description="Hello" />, {
+      container: document.head
     })
+
     expect(document.title).toBe('Hello World')
   })
 
   it('renders without crashing with slug', async () => {
-    await act(async () => {
-      render(<Meta title="Hello World" description="Hello" slug="hello" />, {
-        container: document.head
-      })
+    render(<Meta title="Hello World" description="Hello" slug="hello" />, {
+      container: document.head
     })
+
     expect(document.title).toBe('Hello World')
   })
 })

src/layouts/Site/index.test.tsx

@@ -1,11 +1,10 @@
-import { act, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import Site from '.'
 
 describe('Site', () => {
   it('renders without crashing', async () => {
-    await act(async () => {
-      render(<Site>Hello Site</Site>)
-    })
+    render(<Site>Hello Site</Site>)
+
     await screen.findByText('Hello Site')
     await screen.findAllByText('Lisbon')
   })

tests/jest.setup.tsx

@@ -43,5 +43,5 @@ beforeEach(() => {
 afterEach(() => {
   global.fetch = unmockedFetch
   process.env = unmockedEnv
-  jest.restoreAllMocks()
+  // jest.restoreAllMocks()
 })

tests/pages.test.tsx

@@ -1,13 +1,14 @@
-import { act, render } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import IndexPage, { getStaticProps } from '../src/pages'
+import NotFoundPage from '../src/pages/404'
 import ProjectPage, {
   getStaticPaths,
   getStaticProps as getStaticPropsProject
 } from '../src/pages/[slug]'
-import projects from './__fixtures__/projects.json'
+import mockData from './__fixtures__/giphy.json'
 import project from './__fixtures__/project.json'
+import projects from './__fixtures__/projects.json'
 import repos from './__fixtures__/repos.json'
-import NotFoundPage from '../src/pages/404'
 
 jest.setTimeout(30000)
 
@@ -43,8 +44,12 @@ describe('pages', () => {
   })
 
   it('NotFoundPage', async () => {
-    await act(async () => {
-      render(<NotFoundPage />)
-    })
+    render(<NotFoundPage />)
+    await screen.findByText(/Shenanigans, page not found./)
+    await screen.findByTestId(mockData.data.images.original.mp4)
+
+    const button = await screen.findByText(`Get another 'cat' gif`)
+    fireEvent.click(button)
+    await screen.findByTestId(mockData.data.images.original.mp4)
   })
 })