q-blog/tests/pages/UserBlogs.test.tsx

import React from 'react';
import { describe, it, expect } from 'vitest';
import { Provider } from 'react-redux';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { MemoryRouter, Route, Routes } from 'react-router-dom';
import { render, screen } from '@testing-library/react';
import { store } from '@/state/store';
import UserBlogs from '@/pages/UserBlogs/UserBlogs';
import { server } from '../msw/server';
import { http, HttpResponse } from 'msw';

describe('UserBlogs page', () => {
  it('renders list of blogs for user', async () => {
    server.use(
      http.get('/arbitrary/resources/search', ({ request }) => {
        const url = new URL(request.url);
        if (url.searchParams.get('service') === 'BLOG') {
          return HttpResponse.json([
            { name: 'alice', identifier: 'q-blog-a', created: 1, metadata: { title: 'A' } },
            { name: 'alice', identifier: 'q-blog-b', created: 2, metadata: { title: 'B' } },
          ]);
        }
        return HttpResponse.json([]);
      }),
    );

    render(
      <Provider store={store}>
        <ThemeProvider theme={createTheme()}>
          <MemoryRouter initialEntries={[`/alice/blogs`]}>
            <Routes>
              <Route path="/:user/blogs" element={<UserBlogs />} />
            </Routes>
          </MemoryRouter>
        </ThemeProvider>
      </Provider>,
    );

    expect(await screen.findByText("alice's Blogs")).toBeInTheDocument();
    expect(await screen.findByText('A')).toBeInTheDocument();
    expect(await screen.findByText('B')).toBeInTheDocument();
  });
});