안녕하세요, 이 기능은 아직 실험적이지만 useRouter 는 React.useContext 를 사용하여 next-server/dist/lib/router-context 의 컨텍스트를 사용합니다. 그것을 조롱하려면 이 줄 과 유사한 컨텍스트 공급자에서 래핑해야 합니다.

@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 )를 전달하고 파일 경로를 전달할 수 있습니까? 어떻게 생각하나요?

API는 내부에 있고 언제든지 변경될 수 있으므로 createRouter 를 호출하는 대신 라우터를 직접 조롱하는 것이 가장 좋습니다. 다음은 예입니다.

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 의미가 있습니다. 정말 고마워!

Enzyme+Jest를 사용하여 useRouter를 조롱하는 방법이 있습니까? 나는 조금 동안 온라인 검색을 해 보았고 유일하게 관련 결과가 나타났습니다. 이 문제입니다.

이런 식으로 조롱하는 데 성공했습니다.

import * as nextRouter from 'next/router';

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

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()
  })
})

나는 이것을 이렇게 조롱하는 것을 끝내고 useRouter 내보내기만 필요하므로 이것이 내 목적에 충분히 잘 작동했습니다.

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

누군가가 여기에 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]);

@ijjk 최신 버전에서 그 동작이 변경되었습니까? next/dist/next-server/lib/router-context 에서 가져와야 했습니다. next-server 별도로 설치하면 컨텍스트를 인식하지 못합니다.

나는 똑같은 문제가 있습니다.
우리는 다음 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: "",
    }));

이것은 이상적이지는 않지만 적어도 저에게는 효과가 있습니다.

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 지속적으로 재정의하는 것을 좋아하지 않기 때문에 이상적이지 않습니다.

공식 모의 솔루션이 좋을 것 같아요 :)

@smasontst 의 방법은 우리에게 효과가 있었지만 mockImplementationOnce() 주의하십시오 ... 테스트 중에 구성 요소가 두 번 이상 렌더링되어야 하는 경우 두 번째 렌더링에서 모의 ​​라우터를 사용하지 않는다는 것을 알게 될 것입니다. 그리고 당신의 테스트는 실패할 것입니다. mockImplementationOnce() 를 사용해야 하는 특별한 이유가 없는 한 항상 mockImplementation() 를 사용하는 것이 가장 좋습니다.

테스트별로 고유한 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 함수로 분할할 수 있습니다.

또한 BIG :+1: 공식 조롱 솔루션 @timneutkens

전 세계적으로 조롱되는 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

왜 이것을 사용합니까? 라우터 컨텍스트에 래핑된 재사용 가능한 탑재된 React 구성 요소를 가질 수 있기 때문입니다. 그리고 가장 중요한 것은 루트 구성 요소에서 wrapper.setProps(..) 를 호출할 수 있다는 것입니다!

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')
  })
})

이 솔루션 중 어느 것도 나를 위해 일하지 않았습니다. "올바른" 작업 흐름은 Jest 문서에도 설명되어 있습니다. https://jestjs.io/docs/en/es6-class-mocks#spying -on-methods-of-our-class

그런데 모의는 보는데 통화녹음이 안되네요...

여기 내 현재 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 감사합니다! 잘 작동합니다!

@flybayer 의 솔루션은 저에게 효과적이지만 렌더링 기능에서 반환 유형을 지정해야 합니다.

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

...

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

전 세계적으로 조롱되는 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

왜 이것을 사용합니까? 라우터 컨텍스트에 래핑된 재사용 가능한 탑재된 React 구성 요소를 가질 수 있기 때문입니다. 그리고 가장 중요한 것은 루트 구성 요소에서 wrapper.setProps(..) 를 호출할 수 있다는 것입니다!

안녕하세요, 다음과 같은 오류가 발생합니다.

TypeError: 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");