Next/Router 的 Router 在 test.tsx 文件中未定义

Question

LeftSidebar.tsx 组件

import { usePathname, useRouter } from 'next/navigation';

interface LeftSidebarProps {
  leftSidebarData: InnerPathItem;
  leftSidebarDataIndex: number;
}

export const LeftSidebarItem = (props: LeftSidebarProps) => {
  const pathName = usePathname();
  const router = useRouter();

 return (
    <li
      className={`hover:bg-[rgb(0,0,0,0.18)] w-[14.625rem] h-[2.813rem] hover:rounded-xl flex items-center p-3 cursor-pointer
         ${pathName === props.leftSidebarData.path && `rounded-xl bg-[rgb(0,0,0,0.18)]`} mb-1 nav_li_item`}
      onClick={() => {
        router.push(props.leftSidebarData.path);
      }}
      key={`${props.leftSidebarData.label}${props.leftSidebarDataIndex}`}
      data-testid="li-item"
    >
      {renderIcon(
        pathName === props.leftSidebarData.path,
        props.leftSidebarData.label,
      )}
      <div
        className={`p-2 text-sm ${pathName === props.leftSidebarData.path && 'font-bold'} text-white`}
      >
        {props.leftSidebarData.label}
      </div>
    </li>
  );
};

LeftSidebar.spec.tsx 测试文件

import { fireEvent, render, screen } from '@testing-library/react';
import React from 'react';
import { NextRouter, useRouter } from 'next/router';

import { LeftSideBar } from './LeftSidebar';
import { leftSidebarItems } from './LeftSidebarItems';

jest.mock('next/router', () => ({
  useRouter: jest.fn(),
  NextRouter: jest.fn(),
}));

jest.mock('next/navigation', () => ({
  useRouter() {
    return {
      route: '/Orders',
      pathname: '',
      query: '',
      asPath: '',
      push: jest.fn(),
      events: {
        on: jest.fn(),
        off: jest.fn(),
      },
      beforePopState: jest.fn(() => null),
      prefetch: jest.fn(() => null),
    };
  },
  usePathname() {
    return '';
  },
}));

describe('LeftSideBar', () => {
  describe('Click event on Sidebar', () => {
    const mockPush = jest.fn();

    beforeEach(() => {
      const router=ussRouter();
       console.log(router);
      (useRouter as jest.Mock).mockReturnValue({
        push: mockPush,
        pathname: '/',
      } as Partial<NextRouter>);
    });

    afterEach(() => {
      jest.clearAllMocks();
    });

    it('should navigate to Orders page on click', () => {
      const { getByText } = render(
        <LeftSideBar leftSideBarPathItems={leftSidebarItems} />,
      );

      // Simulate click on the 'Orders' list item
      const liElement = getByText('Orders').closest('li')!;
      fireEvent.click(liElement);

      // Assert that router.push was called with the correct path
      expect(mockPush).toHaveBeenCalledWith('/Orders');
    });
  });
});

我有一个左侧边栏组件，其中包含页面的所有路由。我试图实现给定标签“Ordres”的目标，找到 li 并单击它。 列表 li 被点击，但expect(mockPush).toHaveBeenCalledWith('/Orders');mockPush 未定义，在 beforeEach 中我尝试打印路由器，它也是未定义的

Answer 1

我从下一个/路由器导入 useRouter 而不是从下一个/导航，通过从下一个/导航路由器使用它不是未定义的并且调用了推送方法。

import { useRouter } from 'next/navigation';