React导航，如何测试Navlink的路径？

React导航是一种用于构建前端应用程序的JavaScript库。它提供了一种声明式的方式来创建用户界面，使得开发者可以更轻松地构建可交互的UI组件。

在React导航中，NavLink是一种特殊的导航组件，用于在应用程序中创建链接。它可以根据当前URL的匹配情况自动添加活动类名，以便高亮显示当前选中的导航链接。

要测试NavLink的路径，可以按照以下步骤进行：

安装所需的测试库：通常使用Jest和React Testing Library进行React组件的测试。可以使用以下命令安装它们：

npm install --save-dev jest react-testing-library

创建测试文件：在项目中创建一个与导航组件相关的测试文件，例如Navlink.test.js。
导入所需的测试库和导航组件：在测试文件的顶部，导入所需的库和导航组件：

import React from 'react';
import { render, screen } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import { NavLink } from 'react-router-dom';

编写测试用例：使用render函数将导航组件渲染到虚拟DOM中，并使用screen对象来查询DOM元素。编写测试用例来验证NavLink的路径是否正确匹配：

test('NavLink路径测试', () => {
  render(
    <BrowserRouter>
      <NavLink to="/path" activeClassName="active">链接</NavLink>
    </BrowserRouter>
  );

  const linkElement = screen.getByText(/链接/i);
  expect(linkElement).toHaveAttribute('href', '/path');
});

在上述测试用例中，我们首先使用render函数将NavLink组件渲染到虚拟DOM中。然后，使用screen.getByText查询DOM元素，通过文本内容来获取NavLink组件。最后，使用expect断言来验证NavLink的href属性是否与预期的路径匹配。