Как проверить, что next / link (Next js) перенаправляет страницу после onClick в React? - PullRequest
Новая
       33

Как проверить, что next / link (Next js) перенаправляет страницу после onClick в React?

1 голос
/ 16 марта 2020

Я хочу проверить, что страница перенаправляется после нажатия на div, но я не знаю как, это мой код. Большое вам спасибо 

<div className="bellTest">
   <NextLink href="/notifications">
       <Bell />
   </NextLink>
 </div>

test.tsx 

jest.mock('next/link', () => {
     return ({ children }) => {
            return children;
     };
});

describe('Test of <HeaderContainer>', () => {
    test('Test the page redirect after click', async done => {
        const wrapper = mount( <HeaderComponent /> );
        await wrapper
            .find('.bellTest')
            .at(0)
            .simulate('click');
        // expect the page getting redirect
    });
});

1 Ответ

1 голос
/ 16 марта 2020

Вместо насмешки next/link вы можете зарегистрировать шпиона на событиях маршрутизатора и проверить, был ли он вызван.

Тест будет выглядеть так: 

import Router from 'next/router';

describe('Test of <HeaderContainer>', () => {
  const spies: any = {};

  beforeEach(() => {
    spies.routerChangeStart = jest.fn();
    Router.events.on('routeChangeStart', spies.routerChangeStart);
  });

  afterEach(() => {
    Router.events.off('routeChangeStart', spies.routerChangeStart);
  });

  test('Test the page redirect after click', async done => {
    const wrapper = mount(<HeaderComponent />);
    await wrapper
      .find('.bellTest')
      .at(0)
      .simulate('click');

    expect(spies.routerChangeStart).toHaveBeenCalledWith('expect-url-here');
  });
});
...