new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Mantine · all subjects

testing/jest

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

MantineProvider required for component tests

All Mantine components require MantineProvider to be present in the component tree. When testing Mantine components with React Testing Library, create a custom render function that wraps the test UI with MantineProvider.

Custom render function for Mantine testing

Create a custom render function at ./test-utils/render.tsx that wraps components with MantineProvider and passes env="test" prop. This function should accept ui: React.ReactNode and return the result of testingLibraryRender with a wrapper component containing MantineProvider.

Web APIs to mock in Jest for Mantine

Most Mantine components depend on browser APIs that aren't available in jest-environment-jsdom. Mock the following: window.matchMedia (with matches, media, onchange, addListener, removeListener, addEventListener, removeEventListener, dispatchEvent properties), window.HTMLElement.prototype.scrollIntoView, window.getComputedStyle, document.fonts (with addEventListener and removeEventListener), and ResizeObserver class (with observe, unobserve, disconnect methods).

Jest setup file configuration for Mantine mocks

Create jest.setup.js in the project root with mocks for Web APIs and browser features. Add this file to jest.config.js using setupFilesAfterEnv: ['<rootDir>/jest.setup.js'].

window.matchMedia mock implementation

Mock window.matchMedia with 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() }))

ResizeObserver mock implementation

Create a ResizeObserver mock class with empty observe(), unobserve(), and disconnect() methods. Assign it to window.ResizeObserver.

Testing Modal, Drawer, Popover components

Testing examples for Modal, Drawer, and Popover components that rely on portals are available in the Mantine Help Center.

Testing Select and MultiSelect components

Testing examples for Select and MultiSelect components are available in the Mantine Help Center.

Give your agent this brain