Next.js 路由模拟器：next-router-mock 使用指南

Next.js 路由模拟器：next-router-mock 使用指南

next-router-mock Mock implementation of the Next.js Router 项目地址: https://gitcode.com/gh_mirrors/ne/next-router-mock

项目介绍

next-router-mock 是一个专为 Next.js 设计的内存路由模拟实现，它在测试环境或如 Storybook 这样的组件展示工具中保持“URL”状态于内存中，而不实际触碰地址栏。此库为开发者提供了一种方便的方式，在单元测试及静态页面预览时，模仿 Next.js 的路由行为。它兼容多个Next.js版本，包括v13、v12、v11以及v10，并且灵感来自于react-router中的MemoryRouter。

项目快速启动

安装

首先，确保你的开发环境中已安装Node.js，然后通过npm或者yarn来添加next-router-mock到你的开发依赖：

npm install --save-dev next-router-mock
# 或者，如果你是yarn的使用者
yarn add --dev next-router-mock

在Jest测试中使用

要在Jest测试中使用next-router-mock替换真实的next/router，只需进行以下配置：

// 在setupTests.js文件中或你的测试文件顶部
jest.mock('next/router', () => require('next-router-mock'));

接下来，你可以像平时一样导入并使用useRouter，但实际上是使用模拟版的。

示例测试代码：

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

describe('组件测试', () => {
  it('测试路由改变', () => {
    jest.mock('next/router', () => require('next-router-mock'));

    const ExampleComponent = () => {
      const router = useRouter();
      return (
        <button onClick={() => router.push('/new-page')}>
          当前路径: {router.asPath}
        </button>
      );
    };

    // 设置初始路径
    render(<ExampleComponent />);
    fireEvent.click(screen.getByText(/当前路径:/));
    expect(screen.getByText(/当前路径: \/new-page/)).toBeInTheDocument();
  });
});

应用案例和最佳实践

故事书（Storybook）集成

对于故事书，你需要在配置中加入webpack别名以全局启用模拟路由器：

// .storybook/main.js
module.exports = {
  webpackFinal: async (config, { configType }) => {
    config.resolve.alias['next/router'] = 'next-router-mock';
    return config;
  },
};

并在具体故事中利用MemoryRouterProvider来控制路由上下文。

import { MemoryRouterProvider } from 'next-router-mock/MemoryRouterProvider/next-13'; // 根据使用的Next.js版本选择正确的路径

export const story = () => (
  <MemoryRouterProvider url="/my-story">
    {/* 你的组件 */}
  </MemoryRouterProvider>
);

使用next/link的场景

当你需测试含有next/link的组件时，确保组件被MemoryRouterProvider包裹以正确响应链接点击事件。

import { MemoryRouterProvider } from 'next-router-mock/MemoryRouterProvider';

test('测试next/link', () => {
  render(
    <MemoryRouterProvider>
      <NextLink href="/target" passHref>
        <a>前往目标页面</a>
      </NextLink>
    </MemoryRouterProvider>
  );
});

典型生态项目集成

虽然本项目主要为Next.js社区服务，但在进行特定功能如动态路由测试时，可能需要结合其他测试框架和工具如Jest、React Testing Library或Enzyme。此外，随着Next.js本身的发展，社区中可能会出现更多围绕next-navigation等新特性的测试方法，而next-router-mock的更新和适应这些变化是非常关键的。开发者应当关注其官方仓库以及Next.js的更新日志，确保测试策略与Next.js的最佳实践保持同步。

next-router-mock Mock implementation of the Next.js Router 项目地址: https://gitcode.com/gh_mirrors/ne/next-router-mock