React router 测试

如何测试Router

分为两种情况:

1.在index中的路由配置 2.路由点击事件

import React from 'react';
import { render, cleanup } from 'react-testing-library';
import View from './';

describe('in small screen', () => {
  afterEach(cleanup);

  describe('router', () => {
    afterEach(() => {
      window.history.pushState(null, null, '/');
    });

    it('should navigate to home page by default', () => {
      window.history.pushState(null, null, '/#/');
      const { container } = render(<View />);

      const node = container.querySelector('.home');
      expect(node).not.toBeNull();
    });
    it('should navigate to /about when url match', () => {
      window.history.pushState(null, null, '/#/about');
      const { container } = render(<View />);

      const node = container.querySelector('.about');
      expect(node).not.toBeNull();
    });
    it('should navigate to home page when url did not match', () => {
      window.history.pushState(null, null, '/#/no-match');
      const { container } = render(<View />);

      const node = container.querySelector('.home');
      expect(node).not.toBeNull();
    });
  });

  describe('menu click', () => {
    let container;
    beforeEach(() => {
      container = render(<View />).container;
    });

    afterEach(() => {
      window.history.pushState(null, null, '/');
    });

    it('should navigate to profile page when click my profile link', () => {
      const linkNode = container.querySelector('.my-profile-link');
      linkNode.click();
      expect(window.location.href).toEqual('http://localhost/#/my-profile');

      const node = container.querySelector('.my-profile');
      expect(node).not.toBeNull();
    });
  });
});