Next.js: 如何模拟useRouter？

创建于 2019-06-01 · 21评论 · 资料来源: vercel/next.js

关于 Next.js 的问题

我想确保我的组件使用 useRouter 钩子正确呈现（实际上我试图了解新的动态路由是如何工作的），所以我有代码：

import React from 'react';
import { NextPage } from 'next';
import { useRouter } from 'next/router';

const UserInfo : NextPage = () => {
  const router = useRouter();
  const { query } = router;

  return <div>Hello {query.user}</div>;
};

export default UserInfo;

我正在尝试的是：

// test
import { render, cleanup, waitForElement } from '@testing-library/react';

import UserInfo from './$user';

// somehow mock useRouter for $user component!!!

afterEach(cleanup);

it('Should render correctly on route: /users/nikita', async () => {
  const { getByText } = render(<UserInfo />);

  await waitForElement(() => getByText(/Hello nikita!/i));
});

但是我收到一个错误TypeError: Cannot read property 'query' of null ，它指向const router = useRouter();行。

PS 我知道动态路由目前在金丝雀版本上可用并且可能会改变，但我遇到了路由器问题，而不是 WIP 功能（是吗？）。

资料来源

borisowsky

👍3

最有用的评论

我最终像这样嘲笑它，我只需要useRouter导出，所以这对我的目的来说效果很好：

jest.mock("next/router", () => ({
    useRouter() {
        return {
            route: "/",
            pathname: "",
            query: "",
            asPath: "",
        };
    },
}));

aeksco 于 2019-09-20

👍32 🚀3

所有21条评论

嗨，这个功能仍然是实验性的，但useRouter使用React.useContext来使用来自next-server/dist/lib/router-context的上下文。要模拟它，您需要将它包装在类似于此行的上下文提供程序中

ijjk 于 2019-06-01

👎3 👍3

@ijjk嗨，谢谢！
我不知道我做得对不对，但测试通过了😂

import { render, cleanup, waitForElement } from '@testing-library/react';
import { createRouter } from 'next/router';
import { RouterContext } from 'next-server/dist/lib/router-context';

const router = createRouter('', { user: 'nikita' }, '', {
  initialProps: {},
  pageLoader: jest.fn(),
  App: jest.fn(),
  Component: jest.fn(),
});

import UserInfo from './$user';

afterEach(cleanup);

it('Should render correctly on route: /users/nikita', async () => {
  const { getByText } = render(
    <RouterContext.Provider value={router}>
      <UserInfo />
    </RouterContext.Provider>,
  );

  await waitForElement(() => getByText(/Hello nikita!/i));
});

如果有更抽象的方式来模拟查询参数，那么我将能够传递实际路由（例如/users/nikita ）并将路径传递给文件？你怎么认为？

borisowsky 于 2019-06-01

❤13

最好直接模拟路由器而不是调用createRouter因为该 API 是内部的并且可以随时更改。下面是一个例子：

import React from 'react'
import { render } from '@testing-library/react'
import { RouterContext } from 'next-server/dist/lib/router-context'

describe('Basic test', () => {
  it('Renders current user value', async () => {
    const router = {
      pathname: '/users/$user',
      route: '/users/$user',
      query: { user: 'nikita' },
      asPath: '/users/nikita',
    }
    const User = require('../pages/users/$user').default
    const tree = render(
      <RouterContext.Provider value={router}>
         <User />
      </RouterContext.Provider>
    )
    expect(tree.getByText('User: nikita')).toBeTruthy()
  })
})

ijjk 于 2019-06-02

❤15

@ijjk说得通。非常感谢！

borisowsky 于 2019-06-02

有没有办法使用 Enzyme+Jest 模拟 useRouter？我一直在网上搜索了一下，唯一出现的相关结果就是这个问题。

renellc 于 2019-07-10

👍1

我设法以这种方式嘲笑它。

import * as nextRouter from 'next/router';

nextRouter.useRouter = jest.fn();
nextRouter.useRouter.mockImplementation(() => ({ route: '/' }));

francisprovost 于 2019-07-17

👍23 🚀6 👀2 👎2

jest.spyOn适用于我 -

import React from 'react'
import { render } from '@testing-library/react'
import ResultsProductPage from 'pages/results/[product]'

const useRouter = jest.spyOn(require('next/router'), 'useRouter')

describe('ResultsProductPage', () => {
  it('renders - display mode list', () => {
    useRouter.mockImplementationOnce(() => ({
      query: { product: 'coffee' },
    }))
    const { container } = render(
      <ResultsProductPage items={[{ name: 'mocha' }]} />
    )
    expect(container).toMatchSnapshot()
  })
})

smasontst 于 2019-08-09

👍2

我最终像这样嘲笑它，我只需要useRouter导出，所以这对我的目的来说效果很好：

jest.mock("next/router", () => ({
    useRouter() {
        return {
            route: "/",
            pathname: "",
            query: "",
            asPath: "",
        };
    },
}));

aeksco 于 2019-09-20

👍32 🚀3

如果有人在这里想要模拟useRouter只是为了避免受到命令式prefetch干扰，那么这个简单的模拟将起作用

jest.mock("next/router", () => ({
  useRouter() {
    return {
      prefetch: () => null
    };
  }
}));

一个示例用例是一个包含以下内容的表单组件：

  const router = useRouter();
  useEffect(() => {
    router.prefetch("/success");
    if (confirmSuccess) {
      doStuff();
      router.push( {pathname: "/success" } )
    }
  }, [data]);

t-lock 于 2019-10-23

👍2

@ijjk这种行为在最新版本中是否发生了变化？我不得不从next/dist/next-server/lib/router-context导入。如果我单独安装next-server ，它将无法识别上下文。

chrisfosterelli 于 2019-12-12

👍2

我有同样的问题。
我们在下一个 9. 使用RouterContext.Provider的解决方案都没有实际工作。
我的测试通过的唯一方法是使用@aeksco解决方案作为测试上方的全局对象。否则useRouter总是未定义的。
这并不理想，因为我无法为我的测试设置不同的参数。
对此有何想法？

编辑
我把它与一个全球性的模拟工作next/router进口和spyOn的模拟，这让我打电话给mockImplementation(() => ({// whatever you want})在每个测试。
它看起来像：

jest.mock("next/router", () => ({
  useRouter() {
    return {
      route: "",
      pathname: "",
      query: "",
      asPath: "",
    };
  },
}));

const useRouter = jest.spyOn(require("next/router"), "useRouter");

然后在测试中：

useRouter.mockImplementation(() => ({
      route: "/yourRoute",
      pathname: "/yourRoute",
      query: "",
      asPath: "",
    }));

这并不理想，但至少对我有用

ghost 于 2019-12-23

❤4 👍4 🚀2

FWIW这是我决定的：

import { RouterContext } from 'next/dist/next-server/lib/router-context'
import { action } from '@storybook/addon-actions'
import PropTypes from 'prop-types'
import { useState } from 'react'
import Router from 'next/router'

function RouterMock({ children }) {
  const [pathname, setPathname] = useState('/')

  const mockRouter = {
    pathname,
    prefetch: () => {},
    push: async newPathname => {
      action('Clicked link')(newPathname)
      setPathname(newPathname)
    }
  }

  Router.router = mockRouter

  return (
    <RouterContext.Provider value={mockRouter}>
      {children}
    </RouterContext.Provider>
  )
}

RouterMock.propTypes = {
  children: PropTypes.node.isRequired
}

export default RouterMock

我需要在 Storybook 和 Jest 中都能使用的东西。这似乎可以解决问题，您只需在组件树的某个位置设置<Routermock> 。这并不理想，因为我不喜欢不断覆盖Router.router 。

我认为官方的嘲笑解决方案会很可爱:)

chrisfosterelli 于 2019-12-23

👍14 🎉4 ❤1

@smasontst的方法对我们mockImplementationOnce() ...如果您的组件在测试期间需要多次渲染，您会发现它没有在第二次渲染时使用您的模拟路由器并且您的测试将失败。最好始终使用mockImplementation()代替，除非您有使用mockImplementationOnce()的特定原因。

mbrowne 于 2020-02-07

👍3

我不得不修改我的初始实现，因为我需要在逐个测试的基础上使用唯一的useRouter状态。从@nterol24s提供的示例中获取一个页面并将其更新为我可以在测试中调用的实用函数：

// Mocks useRouter
const useRouter = jest.spyOn(require("next/router"), "useRouter");

/**
 * mockNextUseRouter
 * Mocks the useRouter React hook from Next.js on a test-case by test-case basis
 */
export function mockNextUseRouter(props: {
    route: string;
    pathname: string;
    query: string;
    asPath: string;
}) {
    useRouter.mockImplementationOnce(() => ({
        route: props.route,
        pathname: props.pathname,
        query: props.query,
        asPath: props.asPath,
    }));
}

我现在可以做这样的事情：

import { mockNextUseRouter } from "@src/test_util";

describe("Pricing Page", () => {

    // Mocks Next.js route
    mockNextUseRouter({
        route: "/pricing",
        pathname: "/pricing",
        query: "",
        asPath: `/pricing?error=${encodeURIComponent("Uh oh - something went wrong")}`,
    });

    test("render with error param", () => {
        const tree: ReactTestRendererJSON = Renderer.create(
            <ComponentThatDependsOnUseRouter />
        ).toJSON();
        expect(tree).toMatchSnapshot();
    });
});

请注意@mbrowne的评论——你会用这种方法遇到同样的问题，但如果需要，你可以将上面的示例拆分为mockNextUseRouter和mockNextUseRouterOnce函数。

还有一个大的：+1：官方的嘲讽解决方案@timneutkens

aeksco 于 2020-02-17

👍16 🚀4 ❤2 🎉2 😄2 👀1

对于想要全局模拟Router实例的任何人，您可以将__mocks__文件夹放置在任何位置并以next/router包

__mocks__/next/router/index.js （必须遵循此文件夹结构模式！）

以下示例针对Router.push和Router.replace ：

jest.mock("next/router", () => ({
  // spread out all "Router" exports
  ...require.requireActual("next/router"),

  // shallow merge the "default" exports with...
  default: {
    // all actual "default" exports...
    ...require.requireActual("next/router").default,

    // and overwrite push and replace to be jest functions
    push: jest.fn(),
    replace: jest.fn(),
   },
}));

// export the mocked instance above
module.exports = require.requireMock("next/router");

现在，任何有import Router from "next/router";地方都将成为模拟实例。您还可以向它们添加mockImplementation函数，因为它们将被全局模拟。
如果您希望为每个测试重置此实例，则在您的jest.json添加一个clearMocks属性。

作为参考，如果您想针对特定导出，这里是Router结构：

{
  __esModule: true,
  useRouter: [Function: useRouter],
  makePublicRouterInstance: [Function: makePublicRouterInstance],
  default: { 
    router: null,
    readyCallbacks: [ 
      [Function],
      [Function],
      [Function],
      [Function],
      [Function],
      [Function] 
    ],
    ready: [Function: ready],
    push: [Function],
    replace: [Function],
    reload: [Function],
    back: [Function],
    prefetch: [Function],
    beforePopState: [Function] },
    withRouter: [Function: withRouter],
    createRouter: [Function: createRouter],
    Router: { 
      [Function: Router]
      events: { 
        on: [Function: on],
        off: [Function: off],
        emit: [Function: emit] 
       } 
    },
    NextRouter: undefined 
  }
}

此外，如果您必须使用withRouter或useRouter mount组件，并且您不想模拟它们但仍想针对/围绕创建一些测试它们，然后您可以使用此 HOC 包装器工厂功能进行测试：

import { createElement } from "react";
import { mount } from "enzyme";
import { RouterContext } from "next/dist/next-server/lib/router-context";
// Important note: The RouterContext import will vary based upon the next version you're using;
// in some versions, it's a part of the next package, in others, it's a separate package

/**
 * Factory function to create a mounted RouterContext wrapper for a React component
 *
 * <strong i="33">@function</strong> withRouterContext
 * <strong i="34">@param</strong> {node} Component - Component to be mounted
 * <strong i="35">@param</strong> {object} initialProps - Component initial props for setup.
 * <strong i="36">@param</strong> {object} state - Component initial state for setup.
 * <strong i="37">@param</strong> {object} router - Initial route options for RouterContext.
 * <strong i="38">@param</strong> {object} options - Optional options for enzyme's mount function.
 * <strong i="39">@function</strong> createElement - Creates a wrapper around passed in component (now we can use wrapper.setProps on root)
 * <strong i="40">@returns</strong> {wrapper} - a mounted React component with Router context.
*/
export const withRouterContext = (
  Component,
  initialProps = {},
  state = null,
  router = {
    pathname: "/",
    route: "/",
    query: {},
    asPath: "/",
  },
  options = {},
) => {
  const wrapper = mount(
    createElement(
      props => ( 
        <RouterContext.Provider value={router}>
          <Component { ...props } /> 
        </RouterContext.Provider>
      ),
      initialProps,
    ),
    options,
  );
  if (state) wrapper.find(Component).setState(state);
  return wrapper;
};

用法示例：

import React from "react";
import withRouterContext from "./path/to/reusable/test/utils"; // alternatively you can make this global
import ExampleComponent from "./index";

const initialProps = {
  id: "0123456789",
  firstName: "John",
  lastName: "Smith"
};

const router = {
  pathname: "/users/$user",
  route: "/users/$user",
  query: { user: "john" },
  asPath: "/users/john",
};

const wrapper = withRouterContext(ExampleComponent, initialProps, null, router);

...etc

为什么要用这个？因为它允许你在 Router 上下文中包装一个可重用的已挂载的 React 组件；最重要的是，它允许您在根组件上调用wrapper.setProps(..) ！

mattcarlotta 于 2020-04-12

👍2

import { useRouter } from 'next/router'

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

describe('XXX', () => {
  it('XXX', () => {
    const mockRouter = {
      push: jest.fn() // the component uses `router.push` only
    }
    ;(useRouter as jest.Mock).mockReturnValue(mockRouter)
    // ...
    expect(mockRouter.push).toHaveBeenCalledWith('/hello/world')
  })
})

kenberkeley 于 2020-05-10

👍8 🎉5 ❤2

这些解决方案都不适合我。 Jest 文档中也描述了“正确”的工作流程： https: //jestjs.io/docs/en/es6-class-mocks#spying -on-methods-of-our-class

但是，我可以看到模拟，但它不会记录通话...

coler-j 于 2020-07-15

这是我目前的test-utils.tsx 。我比使用全局模拟更喜欢这个。

import React from 'react';
import { render as defaultRender } from '@testing-library/react';
import { RouterContext } from 'next/dist/next-server/lib/router-context';
import { NextRouter } from 'next/router';

export * from '@testing-library/react';

// --------------------------------------------------
// Override the default test render with our own
//
// You can override the router mock like this:
//
// const { baseElement } = render(<MyComponent />, {
//   router: { pathname: '/my-custom-pathname' },
// });
// --------------------------------------------------
type DefaultParams = Parameters<typeof defaultRender>;
type RenderUI = DefaultParams[0];
type RenderOptions = DefaultParams[1] & { router?: Partial<NextRouter> };

export function render(
  ui: RenderUI,
  { wrapper, router, ...options }: RenderOptions = {},
) {
  if (!wrapper) {
    wrapper = ({ children }) => (
      <RouterContext.Provider value={{ ...mockRouter, ...router }}>
        {children}
      </RouterContext.Provider>
    );
  }

  return defaultRender(ui, { wrapper, ...options });
}

const mockRouter: NextRouter = {
  basePath: '',
  pathname: '/',
  route: '/',
  asPath: '/',
  query: {},
  push: jest.fn(),
  replace: jest.fn(),
  reload: jest.fn(),
  back: jest.fn(),
  prefetch: jest.fn(),
  beforePopState: jest.fn(),
  events: {
    on: jest.fn(),
    off: jest.fn(),
    emit: jest.fn(),
  },
  isFallback: false,
};

flybayer 于 2020-07-17

👍15 ❤3 🎉2

@flybayer谢谢！效果很好！

ujwal-setlur 于 2020-07-19

@flybayer的解决方案对我

import { render as defaultRender, RenderResult } from '@testing-library/react'

...

export function render(
  ui: RenderUI,
  { wrapper, router, ...options }: RenderOptions = {}
): RenderResult { ... }

narze 于 2020-08-19

对于想要全局模拟Router实例的任何人，您可以将__mocks__文件夹放置在任何位置并以next/router包

__mocks__/next/router/index.js （必须遵循此文件夹结构模式！）

以下示例针对Router.push和Router.replace ：

jest.mock("next/router", () => ({
  // spread out all "Router" exports
  ...require.requireActual("next/router"),

  // shallow merge the "default" exports with...
  default: {
    // all actual "default" exports...
    ...require.requireActual("next/router").default,

    // and overwrite push and replace to be jest functions
    push: jest.fn(),
    replace: jest.fn(),
   },
}));

// export the mocked instance above
module.exports = require.requireMock("next/router");

作为参考，如果您想针对特定导出，这里是Router结构：

{
  __esModule: true,
  useRouter: [Function: useRouter],
  makePublicRouterInstance: [Function: makePublicRouterInstance],
  default: { 
    router: null,
    readyCallbacks: [ 
      [Function],
      [Function],
      [Function],
      [Function],
      [Function],
      [Function] 
    ],
    ready: [Function: ready],
    push: [Function],
    replace: [Function],
    reload: [Function],
    back: [Function],
    prefetch: [Function],
    beforePopState: [Function] },
    withRouter: [Function: withRouter],
    createRouter: [Function: createRouter],
    Router: { 
      [Function: Router]
      events: { 
        on: [Function: on],
        off: [Function: off],
        emit: [Function: emit] 
       } 
    },
    NextRouter: undefined 
  }
}

import { createElement } from "react";
import { mount } from "enzyme";
import { RouterContext } from "next/dist/next-server/lib/router-context";
// Important note: The RouterContext import will vary based upon the next version you're using;
// in some versions, it's a part of the next package, in others, it's a separate package

/**
 * Factory function to create a mounted RouterContext wrapper for a React component
 *
 * <strong i="33">@function</strong> withRouterContext
 * <strong i="34">@param</strong> {node} Component - Component to be mounted
 * <strong i="35">@param</strong> {object} initialProps - Component initial props for setup.
 * <strong i="36">@param</strong> {object} state - Component initial state for setup.
 * <strong i="37">@param</strong> {object} router - Initial route options for RouterContext.
 * <strong i="38">@param</strong> {object} options - Optional options for enzyme's mount function.
 * <strong i="39">@function</strong> createElement - Creates a wrapper around passed in component (now we can use wrapper.setProps on root)
 * <strong i="40">@returns</strong> {wrapper} - a mounted React component with Router context.
*/
export const withRouterContext = (
  Component,
  initialProps = {},
  state = null,
  router = {
    pathname: "/",
    route: "/",
    query: {},
    asPath: "/",
  },
  options = {},
) => {
  const wrapper = mount(
    createElement(
      props => ( 
        <RouterContext.Provider value={router}>
          <Component { ...props } /> 
        </RouterContext.Provider>
      ),
      initialProps,
    ),
    options,
  );
  if (state) wrapper.find(Component).setState(state);
  return wrapper;
};

用法示例：

import React from "react";
import withRouterContext from "./path/to/reusable/test/utils"; // alternatively you can make this global
import ExampleComponent from "./index";

const initialProps = {
  id: "0123456789",
  firstName: "John",
  lastName: "Smith"
};

const router = {
  pathname: "/users/$user",
  route: "/users/$user",
  query: { user: "john" },
  asPath: "/users/john",
};

const wrapper = withRouterContext(ExampleComponent, initialProps, null, router);

...etc

为什么要用这个？因为它允许你在 Router 上下文中包装一个可重用的已挂载的 React 组件；最重要的是，它允许您在根组件上调用wrapper.setProps(..) ！

嗨，我收到此错误：

类型错误：require.requireMock 不是函数

使用了这个解决方案：

jest.mock("next/router", () => ({
  // spread out all "Router" exports
  ...jest.requireActual("next/router"),

  // shallow merge the "default" exports with...
  default: {
    // all actual "default" exports...
    ...jest.requireActual("next/router").default,

    // and overwrite push and replace to be jest functions
    push: jest.fn(),
    replace: jest.fn(),
  },
}));

// export the mocked instance above
module.exports = jest.requireMock("next/router");

ron766 于 2020-08-31

❤1

此页面是否有帮助？

0 / 5 - 0 等级

Next.js: 如何模拟useRouter？

关于 Next.js 的问题

最有用的评论

所有21条评论

相关问题