q-blog/tests/components/ScrollToTop.test.tsx

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

describe('ScrollToTop button', () => {
  it('appears after scrolling', async () => {
    render(
      <Provider store={store}>
        <ThemeProvider theme={createTheme()}>
          <MemoryRouter>
            <GlobalWrapper>
              <div style={{ height: 2000 }}>Tall content</div>
            </GlobalWrapper>
          </MemoryRouter>
        </ThemeProvider>
      </Provider>,
    );
    // Simulate scroll
    Object.defineProperty(window, 'pageYOffset', { value: 300, writable: true });
    window.dispatchEvent(new Event('scroll'));
    expect(await screen.findByLabelText('Scroll to top')).toBeInTheDocument();
  });
});