Add example with mantine tests package

.github/workflows/npm_test.yml

@@ -1,27 +0,0 @@
-name: npm test
-
-on:
-  pull_request:
-    branches:
-      - '**'
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
-  cancel-in-progress: true
-
-jobs:
-  test_pull_request:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version-file: '.nvmrc'
-          cache: 'yarn'
-          cache-dependency-path: '**/yarn.lock'
-      - name: Install dependencies
-        run: yarn
-      - name: Run build
-        run: npm run build
-      - name: Run tests
-        run: npm test

.nvmrc

@@ -1 +0,0 @@
-v20.9.0

.yarnrc.yml

@@ -1,3 +1,2 @@
 nodeLinker: node-modules
-
-yarnPath: .yarn/releases/yarn-4.4.0.cjs
+yarnPath: .yarn/releases/yarn-4.0.1.cjs

components/Welcome/Welcome.test.tsx

@@ -1,7 +1,9 @@
-import { render, screen } from '@/test-utils';
+import { render, screen, tests } from '@/test-utils';
 import { Welcome } from './Welcome';
 
 describe('Welcome component', () => {
+  tests.itSupportsClassName({ component: Welcome, props: {} });
+
   it('has correct Next.js theming section link', () => {
     render(<Welcome />);
     expect(screen.getByText('this guide')).toHaveAttribute(

components/Welcome/Welcome.tsx

@@ -1,9 +1,9 @@
 import { Title, Text, Anchor } from '@mantine/core';
 import classes from './Welcome.module.css';
 
-export function Welcome() {
+export function Welcome(props: React.ComponentPropsWithoutRef<'div'>) {
   return (
-    <>
+    <div {...props}>
       <Title className={classes.title} ta="center" mt={100}>
         Welcome to{' '}
         <Text inherit variant="gradient" component="span" gradient={{ from: 'pink', to: 'yellow' }}>
@@ -18,6 +18,6 @@ export function Welcome() {
         </Anchor>
         . To get started edit page.tsx file.
       </Text>
-    </>
+    </div>
   );
 }

jest.setup.cjs

@@ -2,7 +2,6 @@ require('@testing-library/jest-dom');
 
 const { getComputedStyle } = window;
 window.getComputedStyle = (elt) => getComputedStyle(elt);
-window.HTMLElement.prototype.scrollIntoView = () => {};
 
 Object.defineProperty(window, 'matchMedia', {
   writable: true,

package.json

@@ -19,54 +19,56 @@
     "storybook:build": "storybook build"
   },
   "dependencies": {
-    "@mantine/core": "7.12.0",
-    "@mantine/hooks": "7.12.0",
-    "@next/bundle-analyzer": "^14.2.4",
-    "@tabler/icons-react": "^3.6.0",
-    "next": "14.2.4",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "@mantine/core": "7.2.2",
+    "@mantine/hooks": "7.2.2",
+    "@next/bundle-analyzer": "^14.0.1",
+    "@tabler/icons-react": "^2.40.0",
+    "next": "14.0.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.7",
-    "@next/eslint-plugin-next": "^14.2.4",
-    "@storybook/addon-essentials": "^8.1.10",
-    "@storybook/addon-styling-webpack": "^1.0.0",
-    "@storybook/blocks": "^8.1.10",
-    "@storybook/nextjs": "^8.1.10",
-    "@storybook/react": "^8.1.10",
-    "@testing-library/dom": "^10.1.0",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^16.0.0",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
-    "@types/node": "^20.14.8",
-    "@types/react": "18.3.3",
-    "@typescript-eslint/eslint-plugin": "^7.13.1",
-    "@typescript-eslint/parser": "^7.13.1",
+    "@babel/core": "^7.23.2",
+    "@mantine-tests/core": "^1.0.1",
+    "@next/eslint-plugin-next": "^14.0.1",
+    "@storybook/addon-essentials": "^7.5.2",
+    "@storybook/addon-styling-webpack": "^0.0.5",
+    "@storybook/blocks": "^7.5.2",
+    "@storybook/nextjs": "^7.5.2",
+    "@storybook/react": "^7.5.2",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.7",
+    "@types/node": "^20.8.10",
+    "@types/react": "18.2.34",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
     "babel-loader": "^9.1.3",
-    "eslint": "^8.57.0",
+    "eslint": "^8.53.0",
     "eslint-config-airbnb": "19.0.4",
-    "eslint-config-airbnb-typescript": "^18.0.0",
-    "eslint-config-mantine": "3.2.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^28.6.0",
-    "eslint-plugin-jsx-a11y": "^6.9.0",
-    "eslint-plugin-react": "^7.34.3",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-testing-library": "^6.2.2",
+    "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-config-mantine": "3.0.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jest": "^27.6.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-testing-library": "^6.1.0",
     "jest": "^29.7.0",
+    "jest-axe": "^8.0.0",
     "jest-environment-jsdom": "^29.7.0",
-    "postcss": "^8.4.38",
-    "postcss-preset-mantine": "1.17.0",
+    "postcss": "^8.4.31",
+    "postcss-preset-mantine": "1.11.0",
     "postcss-simple-vars": "^7.0.1",
-    "prettier": "^3.3.2",
-    "storybook": "^8.1.10",
-    "storybook-dark-mode": "^4.0.2",
-    "stylelint": "^16.6.1",
-    "stylelint-config-standard-scss": "^13.1.0",
-    "ts-jest": "^29.1.5",
-    "typescript": "5.5.2"
+    "prettier": "^3.0.3",
+    "storybook": "^7.5.2",
+    "storybook-dark-mode": "^3.0.1",
+    "stylelint": "^15.11.0",
+    "stylelint-config-standard-scss": "^11.1.0",
+    "ts-jest": "^29.1.1",
+    "typescript": "5.2.2"
   },
-  "packageManager": "yarn@4.4.0"
+  "packageManager": "yarn@4.0.1"
 }

test-utils/index.ts

@@ -1,5 +1,6 @@
 import userEvent from '@testing-library/user-event';
 
+export { tests } from '@mantine-tests/core';
 export * from '@testing-library/react';
 export { render } from './render';
 export { userEvent };