Zenn
✅

Mantine UI v7をTesting Libraryするのが大変だった件

2024/04/15に公開
React
Vitest
mantine
Testing Library
jsdom
tech

環境

一部抜粋

  • Bun@1.0.30
  • react@18.2.0
  • react-dom@18.2.0
  • vitest@1.4.0
  • jest-environment-jsdom@29.7.0
  • jsdom@24.0.0

解決法

mantineがjsdomの未実装のブラウザ依存のAPI？を呼び出してるっぽいので以下のbeforeAll()が必要みたい。

renderするときのwrapperにMantineのProviderを渡すのも忘れずに

/**
 * @jest-environment jsdom
 */
import { render, screen } from '@testing-library/react'
import { beforeAll, describe, it, vi } from 'vitest'

import { Provider } from '@/provider'
describe('Hoge', () => {
	beforeAll(() => {
		Object.defineProperty(window, 'matchMedia', {
			writable: true,
			value: vi.fn().mockImplementation((query) => ({
				matches: false,
				media: query,
				onchange: null,
				addListener: vi.fn(), // deprecated
				removeListener: vi.fn(), // deprecated
				addEventListener: vi.fn(),
				removeEventListener: vi.fn(),
				dispatchEvent: vi.fn(),
			})),
		})

		global.ResizeObserver = class ResizeObserver {
			observe() {}
			unobserve() {}
			disconnect() {}
		}
	})
})

参考

Discussion