Setup jest

.eslintignore

@@ -0,0 +1,2 @@
+*.js
+vite.config.ts

jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jest-environment-jsdom',
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  transform: {
+    '^.+\\.ts?$': 'ts-jest',
+  },
+};

jest.setup.js

@@ -0,0 +1,26 @@
+require('@testing-library/jest-dom/extend-expect');
+
+const { getComputedStyle } = window;
+window.getComputedStyle = (elt) => getComputedStyle(elt);
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+window.ResizeObserver = ResizeObserver;

package.json

@@ -21,6 +21,11 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@testing-library/dom": "^8.20.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.4.0",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "@typescript-eslint/eslint-plugin": "^5.30.0",
@@ -34,7 +39,10 @@
     "eslint-plugin-jsx-a11y": "^6.6.0",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "jest": "^29.4.1",
+    "jest-environment-jsdom": "^29.4.1",
     "prettier": "^2.8.3",
+    "ts-jest": "^29.0.5",
     "typescript": "^4.9.4",
     "vite": "^4.0.4"
   }

src/App.tsx

@@ -1,15 +1,10 @@
-import { Text, Button, Stack } from '@mantine/core';
 import { ThemeProvider } from './ThemeProvider';
+import { Welcome } from './Welcome/Welcome';
 
 export default function App() {
   return (
     <ThemeProvider>
-      <Stack align="center" mt={50}>
-        <Text size="xl" weight={500}>
-          Welcome to Mantine!
-        </Text>
-        <Button>Click the button</Button>
-      </Stack>
+      <Welcome />
     </ThemeProvider>
   );
 }

src/Welcome/Welcome.test.tsx

@@ -0,0 +1,7 @@
+import { render, screen } from '@testing-library/react';
+import { Welcome } from './Welcome';
+
+it('displays welcome text', () => {
+  render(<Welcome />);
+  expect(screen.getByText('Welcome to Mantine!')).toBeInTheDocument();
+});

src/Welcome/Welcome.tsx

@@ -0,0 +1,12 @@
+import { Button, Stack, Text } from '@mantine/core';
+
+export function Welcome() {
+  return (
+    <Stack align="center" mt={50}>
+      <Text size="xl" weight={500}>
+        Welcome to Mantine!
+      </Text>
+      <Button>Click the button</Button>
+    </Stack>
+  );
+}