Files
snippet-pastebin/jest.setup.ts
johndoe6345789 2f1cc61c2c Add test IDs and accessibility to editor and preview components
Third iteration of comprehensive accessibility improvements:
- Added test IDs to CodeEditorSection (preview checkbox, editor containers, error message)
- Added test IDs and roles to ReactPreview component (loading, error, unsupported states)
- Enhanced preview components with proper ARIA labels and status roles
- Added test IDs to demo feature cards with region role
- Improved error states with data-testid for error messages
- Added aria-label attributes to preview state containers

Component updates:
- CodeEditorSection: Enable preview checkbox, editor/preview containers, error display
- ReactPreview: Loading state, error state, unsupported language state
- DemoFeatureCards: Feature cards grid with region role
- Preview state management: Added proper ARIA roles (status, alert)

These additions enable comprehensive testing of:
- Code editor workflows (editing, preview toggling, error states)
- Component preview rendering and error handling
- Different preview states (loading, error, unsupported)
- Demo feature cards navigation and display

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-01-20 18:15:42 +00:00

76 lines
1.6 KiB
TypeScript

import '@testing-library/jest-dom'
import React from 'react'
// Make React globally available for components that may reference it
global.React = React
// Mock import.meta for Vite compatibility
Object.defineProperty(globalThis, 'import', {
value: {
meta: {
env: {
DEV: false,
PROD: true,
SSR: false,
},
},
},
})
// Mock Next.js router
jest.mock('next/router', () => ({
useRouter: () => ({
push: jest.fn(),
pathname: '/',
query: {},
asPath: '/',
}),
}))
// Mock Next.js navigation
jest.mock('next/navigation', () => ({
useRouter: () => ({
push: jest.fn(),
replace: jest.fn(),
prefetch: jest.fn(),
}),
usePathname: () => '/',
useSearchParams: () => new URLSearchParams(),
useParams: () => ({}),
}))
// Mock window.matchMedia
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(),
})),
})
// Suppress console errors in tests unless explicitly needed
const originalError = console.error
beforeAll(() => {
console.error = (...args: any[]) => {
if (
typeof args[0] === 'string' &&
(args[0].includes('Warning: ReactDOM.render') ||
args[0].includes('Warning: useLayoutEffect') ||
args[0].includes('Not implemented: HTMLFormElement.prototype.submit'))
) {
return
}
originalError.call(console, ...args)
}
})
afterAll(() => {
console.error = originalError
})