How to test useMatch with vitest ?

[ccreusat]

Hi!

⚠️ I'm learning vitest and react-testing-library so I don't understand everything very well yet.

I am testing a component that uses useMatch where a button must be disabled if we match the expected path ('/id/:wikiId/page/create').

I wrote two ways of testing it with spyOn and with vi.hoisted / vi.mocked that are working but don't understand why.

Component

export const NewPage = () => {
  const navigate = useNavigate();
  const match = useMatch('/id/:wikiId/page/create');

  const { t } = useTranslation();

  const handleCreatePage = () => navigate(`page/create`);

  return (
    <div className="d-grid my-16">
      <Button
        variant="outline"
        onClick={handleCreatePage}
        leftIcon={<Plus />}
        disabled={!!match}
      >
        {t('wiki.create.new.page')}
      </Button>
    </div>
  );
};

First with SpyOn

import * as Router from 'react-router-dom`

vi.mock('react-router-dom', async () => {
  const router = await vi.importActual<typeof import('react-router-dom')>(
    'react-router-dom'
  );

  return {
    ...router,
    useNavigate: () => vi.fn(),
    useMatch: () => vi.fn(),
  };
});

it('should disable button', async () => {
    render(<NewPage />);

    vi.spyOn(Router, 'useMatch').mockReturnValue({
      params: {
        wikiId: '911261e9-5101-45a7-9b29-f7ce3ace4707',
      },
      pathname: '/id/911261e9-5101-45a7-9b29-f7ce3ace4707/page/create',
      pathnameBase: '/id/911261e9-5101-45a7-9b29-f7ce3ace4707/page/create',
      pattern: {
        path: '/id/:wikiId/page/create',
        caseSensitive: false,
        end: true,
      },
    });

    const btn = await screen.findByRole('button');

    expect(btn).toBeDisabled();
  });

  it('should not have disable button', async () => {
    vi.spyOn(Router, 'useMatch').mockReturnValue(null);

    render(<NewPage />);

    const btn = screen.getByRole('button');

    expect(btn).not.toBeDisabled();
  });

Then with vi.hoisted and vi.mocked

const mocks = vi.hoisted(() => ({
  useMatch: vi.fn(),
  useNavigate: vi.fn(),
}));

vi.mock('react-router-dom', async () => {
  const router = await vi.importActual<typeof import('react-router-dom')>(
    'react-router-dom'
  );

  return {
    ...router,
    useNavigate: mocks.useNavigate,
    useMatch: mocks.useMatch,
  };
});

it('should disable button', async () => {
    vi.mocked(mocks.useMatch).mockReturnValue({
      params: {
        wikiId: '911261e9-5101-45a7-9b29-f7ce3ace4707',
      },
      pathname: '/id/911261e9-5101-45a7-9b29-f7ce3ace4707/page/create',
      pathnameBase: '/id/911261e9-5101-45a7-9b29-f7ce3ace4707/page/create',
      pattern: {
        path: '/id/:wikiId/page/create',
        caseSensitive: false,
        end: true,
      },
    });
    render(<NewPage />);

    screen.debug();

    const btn = await screen.findByRole('button');

    expect(btn).toBeDisabled();
  });

  it('should not have disable button', async () => {
    vi.mocked(mocks.useMatch).mockReturnValue(null);

    render(<NewPage />);

    screen.debug();

    const btn = screen.getByRole('button');

    expect(btn).not.toBeDisabled();
  });

Questions

• How to test useMatch ? SpyOn, vi.mocked or something else ?
• Are these tests 'valid' even if they are passing ?

Thanks!