q-blog/tests/components/PostPreview.a11y.test.tsx

import React from 'react';
import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
import { Provider } from 'react-redux';
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { axe } from 'jest-axe';
import PostPreview from '@/pages/BlogList/PostPreview';
import { store } from '@/state/store';

const original = (global as any).qortalRequest;

beforeEach(() => {
  (global as any).qortalRequest = vi.fn().mockResolvedValue('http://avatar/url');
});
afterEach(() => {
  (global as any).qortalRequest = original;
  vi.restoreAllMocks();
});

describe('PostPreview a11y', () => {
  it('has no detectable violations', async () => {
    const { container } = render(
      <Provider store={store}>
        <ThemeProvider theme={createTheme()}>
          <MemoryRouter>
            <PostPreview
              title="Title"
              createdAt={0}
              author="alice"
              description="Desc"
              blogPost={{
                id: 'q-blog-b1-post-1',
                user: 'alice',
                title: 'Title',
                description: 'Desc',
                createdAt: 0,
              }}
            />
          </MemoryRouter>
        </ThemeProvider>
      </Provider>,
    );
    // Wait for avatar effect to settle to avoid act warning
    await screen.findByAltText("alice's avatar");
    const results = await axe(container, {
      rules: {
        // ignore aria-prohibited-attr warnings from container div without a role
        'aria-prohibited-attr': { enabled: false },
      },
    });
    expect(results).toHaveNoViolations();
  });
});