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

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

describe('PostPreview author navigation', () => {
  it('clicking author navigates to /:user', async () => {
    render(
      <Provider store={store}>
        <ThemeProvider theme={createTheme()}>
          <MemoryRouter initialEntries={[`/`]}>
            <Routes>
              <Route
                path="/"
                element={
                  <PostPreview
                    title="Title"
                    createdAt={0}
                    author="alice"
                    description="Desc"
                    blogPost={{
                      id: 'q-blog-a-post-1',
                      user: 'alice',
                      title: 'Title',
                      description: 'Desc',
                      createdAt: 0,
                    }}
                  />
                }
              />
              <Route path="/:user" element={<div>User Root</div>} />
            </Routes>
          </MemoryRouter>
        </ThemeProvider>
      </Provider>,
    );

    // click the author text
    const author = await screen.findByText('alice');
    author.click();
    expect(await screen.findByText('User Root')).toBeInTheDocument();
  });
});