jest.setup.js

// Extend `expect` matchers.
import '@testing-library/jest-dom'
import 'jest-axe/extend-expect'

// Mock `window.matchMedia`.
Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: jest.fn().mockImplementation(query => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(), // deprecated
    removeListener: jest.fn(), // deprecated
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  })),
})

// Mock `window.IntersectionObserver`
class MockIntersectionObserver {
  observe = jest.fn()
  takeRecords = jest.fn()
  disconnect = jest.fn()
  unobserve = jest.fn()
}

Object.defineProperty(window, 'IntersectionObserver', {
  writable: true,
  configurable: true,
  value: MockIntersectionObserver,
})

Object.defineProperty(globalThis, 'IntersectionObserver', {
  writable: true,
  configurable: true,
  value: MockIntersectionObserver,
})

// Mock window animation frame.
window.requestAnimationFrame = function (callback) {
  return setTimeout(callback)
}

window.cancelAnimationFrame = window.clearTimeout

// Mock React portal.
function mockCreatePortal(element, target) {
  return (
    <div>
      <div id="content">{element}</div>
      <div id="target" data-target-tag-name={target.tagName}></div>
    </div>
  )
}

jest.mock('react-dom', () => {
  const reactDom = jest.requireActual('react-dom')
  reactDom.createPortal = mockCreatePortal
  return reactDom
})

// Disable ant design hashed CSS-in-JS class name.
jest.mock('antd', () => {
  const antd = jest.requireActual('antd')
  antd.theme.defaultConfig.hashed = false
  return antd
})