NextJS 路由器 &笑话:如何模拟路由器更改事件 [英] NextJS Router & Jest: How can I mock router change event

问题描述

我正在使用 next-routes 并且在我的 React 组件中我使用下面的 useEffect 代码块来检测 Router 更改事件:

I am using next-routes and in my React component I am using below useEffect code block to detect Router change event:

useEffect(() => {
  // THIS BLOCK WILL BE EXECUTED WHEN THE COMPONENT IS ALREADY MOUNTED AND SCREEN WOULD BE REDNDERED IN WHEN ROUTED CLIENT SIDE
  const handleRouterChangeComplete = url => {
    // console.log('INNNN handleRouterChangeComplete url = ', url);
    // MY REST OF THE LOGIC HERE
  };

  // THIS BLOCK WILL BE EXECUTED WHEN THE SCREEN WOULD BE REDNDERED IN WHEN ROUTED CLIENT SIDE
  Router.events.on('routeChangeComplete', handleRouterChangeComplete);
  return () => {
    Router.events.off('routeChangeComplete', handleRouterChangeComplete);
  };
}, []);

我正在使用 jest 为这个组件编写单元测试用例并面临以下错误:

I am using jest to write unit test case for this component and facing below error:

TypeError: Cannot read property 'on' of undefined

      183 |
      184 |     // THIS BLOCK WILL BE EXECUTED WHEN THE SCREEN WOULD BE REDNDERED IN WHEN ROUTED CLIENT SIDE
    > 185 |     Router.events.on('routeChangeComplete', handleRouterChangeComplete);

谁能帮我模拟 Router Change 事件?谢谢

Can anybody please help me with mocking the Router Change event? Thanks

推荐答案

我在我的实现中使用 next/router 中的 useRouter 钩子.

I am using useRouter hook from next/router in my implementation.

import { FunctionComponent, useEffect } from 'react';
import { useRouter } from 'next/router';

const handleRouteChange = (url) => {
  // handle route change
  return `handling url - ${url}`
};

const Component: FunctionComponent = () => {
  const router = useRouter();

  useEffect(() => {
    router.events.on('routeChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events]);

  // do other things
};

并在我的测试中执行以下操作来模拟 useRouter:

and doing the following in my test to mock useRouter:

jest.mock('next/router');

let eventName;
let routeChangeHandler;

useRouter.mockImplementation(() => {
  return {
    events: {
      on: jest.fn((event, callback) => {
        eventName = event;
        routeChangeHandler = callback;
      }),
      off: jest.fn((event, callback) => {
        eventName = event;
        routeChangeHandler = callback;
      }),
    },
  };
});

我的测试看起来像

it('should call the required functions', () => {
    render(<Component />);

    expect(useRouter).toHaveBeenCalledTimes(1);
    expect(eventName).toBe('routeChangeComplete'); 
    expect(routeChangeHandler).toBeDefined();

    expect(routeChangeHandler('/')).toBe('handling url - /');

    useRouter().events.on('onEvent', routeChangeHandler);
    expect(useRouter).toHaveBeenCalledTimes(2);
    expect(eventName).toBe('onEvent');

    useRouter().events.off('offEvent', routeChangeHandler);
    expect(useRouter).toHaveBeenCalledTimes(3);
    expect(eventName).toBe('offEvent');
});

这篇关于NextJS 路由器 &笑话:如何模拟路由器更改事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！