# Jest

# Testing with Jest

This guide will help you set up [Jest](https://jestjs.io/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) for your project.
Note that this guide only covers shared logic that can be applied to any framework, and
it doesn't cover the initial setup of [Jest](https://jestjs.io/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) as it may vary depending on the framework you're using.

## Custom render

All Mantine components require [MantineProvider](https://mantine.dev/llms/theming-mantine-provider.md) to be present in the component tree.
To add [MantineProvider](https://mantine.dev/llms/theming-mantine-provider.md) to the component tree in your tests, create a [custom render](https://testing-library.com/docs/react-testing-library/setup/#custom-render)
function:

```tsx
// ./test-utils/render.tsx
import { render as testingLibraryRender } from '@testing-library/react';
import { MantineProvider } from '@mantine/core';
// Import your theme object
import { theme } from '../src/theme';

export function render(ui: React.ReactNode) {
  return testingLibraryRender(<>{ui}</>, {
    wrapper: ({ children }: { children: React.ReactNode }) => (
      <MantineProvider theme={theme} env="test">{children}</MantineProvider>
    ),
  });
}
```

It's usually more convenient to export all `@testing-library/*` functions that you're planning to use
from a `./testing-utils/index.ts` file:

```tsx
import userEvent from '@testing-library/user-event';

export * from '@testing-library/react';
export { render } from './render';
export { userEvent };
```

Then you should import all testing utilities from `./testing-utils` instead of `@testing-library/react`:

```tsx
import { render, screen } from '../test-utils';
import { Welcome } from './Welcome';

describe('Welcome component', () => {
  it('has correct Next.js theming section link', () => {
    render(<Welcome />);
    expect(screen.getByText('this guide')).toHaveAttribute(
      'href',
      'https://mantine.dev/guides/next/'
    );
  });
});
```

## Mock Web APIs

Most Mantine components depend on browser APIs like `window.matchMedia` or `ResizeObserver`.
These APIs aren't available in the `jest-environment-jsdom` environment and you'll need to mock them in your tests.

Create a `jest.setup.js` file in your project root and add the following code to it:

```tsx
import '@testing-library/jest-dom';

const { getComputedStyle } = window;
window.getComputedStyle = (elt) => getComputedStyle(elt);
window.HTMLElement.prototype.scrollIntoView = () => {};

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(),
  })),
});

if (!document.fonts) {
  Object.defineProperty(document, 'fonts', {
    writable: true,
    value: { addEventListener: jest.fn(), removeEventListener: jest.fn() },
  });
}

class ResizeObserver {
  observe() {}
  unobserve() {}
  disconnect() {}
}

window.ResizeObserver = ResizeObserver;
```

Then add it as a setup file in your `jest.config.js`:

```js
const config = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  // ... rest of your config
};
```

## Framework specific setup

Jest setup for different frameworks may vary and usually changes over time.
To learn how to set up Jest for your framework, either check the [Jest](https://jestjs.io/docs/getting-started)
and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) documentation
or check one of the premade [templates](https://mantine.dev/llms/getting-started.md). Most of the templates include Jest setup, and
you can use them as a reference.

## Testing examples

You can find testing examples in Mantine Help Center:

* [How can I test Modal/Drawer/Popover components?](https://help.mantine.dev/q/portals-testing)
* [How can I test Select/MultiSelect components?](https://help.mantine.dev/q/combobox-testing)