TypeError:无法读取router.pathname.startsWith()中未定义的属性“”startsWith“”

Question

我在NextJS中使用Jest和react测试库进行测试，在nav组件中我使用以下代码

<li className={router.pathname.startsWith('/settings/employeetypes') ? "active-link" : ""}>
 <a className="dropdown-item" href="#">Employee Type</a>
</li>

在Home Component中使用Nav组件。

​

​

测试文件为：

import React from 'react'
import { render, screen } from '@testing-library/react'
import * as nextRouter from 'next/router';
import '@testing-library/jest-dom'
nextRouter.useRouter = jest.fn();
nextRouter.useRouter.mockImplementation(() => ({ route: '/' }));
import Home from '../pages/index'

describe('Home', () => {
  it('Home Page renders a NavBar', () => {    
      render(<Home />)
      expect(screen.getByText(/live/i)).toBeInTheDocument();
  })

  it('Homepage should display app-wrapper class',() => {
    const { container } = render(<Home />)
    expect(container.getElementsByClassName('app-wrapper').length).toBe(1);
  })

  it('Homepage should display map',() => {
    const { container } = render(<Home  />)
    expect(container.firstChild).toMatchSnapshot();
  })
})

Home零部件的代号为：

import axios from 'axios'
import NavBar from '@/components/NavBar'
import { useRef, useEffect } from 'react'
import { loadModules } from 'esri-loader'

export default function Home({...props}) {

  useEffect(() => {
     // some stuff there 
  })

  return (
    <div id="home-container"> 
        <NavBar />
        ....
        .... 
    </div>
}

export async function getServerSideProps(context) {
   ... // Call API for get data for Home Component
}

NavBar组件代码：

import Link from "next/link";
import { useRouter } from "next/router";

const NavBar = ({...props}) => {
   const router = useRouter();

   return (
          <ul className="dropdown-menu" aria-labelledby="navbarDropdown">
               <li className={router.pathname == "/" ? "active-link nav-item" : "nav-item"}>
                        <Link href="/">
                            <a className="nav-link">
                                <span className="nav-icon">
                                    <img src="/icons/dashboard.png" />
                                </span>
                                <span className="nav-link-text">Live View</span>
                            </a>
                            </Link>
                 </li>

                  <li className={router.pathname.startsWith('/settings/locations') ? "active-link" : ""}>
                    <Link href="/settings/locations">
                       <a className="dropdown-item">Locations</a>
                     </Link>
                  </li>
            </ul>
   )
 }

Answer 1

您可以模拟useRouter()来返回像{pathname: "/settings/locations"}这样的对象。然后，router.pathname不再是未定义的，并且具有startsWith()方法。

您只需修改测试文件中的现有行：

nextRouter.useRouter.mockImplementation(() => ({ route: '/', pathname: '/' })); // or which pathname you want to test