नमस्ते, यह सुविधा अभी भी प्रायोगिक है लेकिन 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 ) पास कर पाऊंगा और फ़ाइल के लिए पथ पास कर पाऊंगा? तुम क्या सोचते हो?

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 जो समझ में आता है। आपका बहुत बहुत धन्यवाद!

क्या एंजाइम + जेस्ट का उपयोग करके राउटर का मजाक उड़ाने का कोई तरीका है? मैं थोड़ी देर के लिए ऑनलाइन खोज कर रहा हूं और केवल प्रासंगिक परिणाम जो आते हैं वह है यह मुद्दा।

मैं इस तरह इसका मजाक उड़ाने में कामयाब रहा।

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

यह आदर्श नहीं है लेकिन कम से कम यह मेरे लिए काम करता है

एफडब्ल्यूआईडब्ल्यू यही वह है जिस पर मैंने समझौता किया है:

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() सावधान रहें ... यदि आपके घटक को आपके परीक्षण के दौरान एक से अधिक बार प्रस्तुत करने की आवश्यकता है, तो आप पाएंगे कि यह दूसरे रेंडर पर आपके नकली राउटर का उपयोग नहीं कर रहा है और आपका परीक्षण विफल हो जाएगा। इसके बजाय हमेशा mockImplementation() उपयोग करना सबसे अच्छा है, जब तक कि आपके पास mockImplementationOnce() का उपयोग करने का कोई विशिष्ट कारण न हो।

मुझे अपने प्रारंभिक कार्यान्वयन को संशोधित करना पड़ा क्योंकि मुझे परीक्षण-दर-परीक्षण के आधार पर अद्वितीय 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: आधिकारिक मॉकिंग समाधान

किसी भी व्यक्ति के लिए जो विश्व स्तर पर नकली 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 
  }
}

इसके अलावा, यदि आपके पास mount घटक हैं जो withRouter या useRouter का उपयोग करते हैं और आप

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

इसका उपयोग क्यों करें? क्योंकि यह आपको राउटर के संदर्भ में लिपटे एक पुन: प्रयोज्य माउंटेड रिएक्ट घटक की अनुमति देता है; और सबसे महत्वपूर्ण बात यह है कि यह आपको रूट घटक पर 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')
  })
})

इनमें से किसी भी समाधान ने मेरे लिए काम नहीं किया। जेस्ट डॉक्स में "सही" वर्कफ़्लो का वर्णन यहाँ भी किया गया है: 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 
  }
}

इसके अलावा, यदि आपके पास mount घटक हैं जो withRouter या useRouter का उपयोग करते हैं और आप

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

इसका उपयोग क्यों करें? क्योंकि यह आपको राउटर के संदर्भ में लिपटे एक पुन: प्रयोज्य माउंटेड रिएक्ट घटक की अनुमति देता है; और सबसे महत्वपूर्ण बात यह है कि यह आपको रूट घटक पर wrapper.setProps(..) पर कॉल करने की अनुमति देता है!

हाय, मुझे यह त्रुटि मिल रही है:

लेखन त्रुटि: requ.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");