import { mount } from 'enzyme'; import React from 'react'; import { Link, MemoryRouter, Route, Routes, useLocation, useNavigate } from 'react-router-dom'; import Breadcrumb from '../index'; const Apps = () => ( ); const breadcrumbNameMap = { '/apps': 'Application List', '/apps/1': 'Application1', '/apps/2': 'Application2', '/apps/1/detail': 'Detail', '/apps/2/detail': 'Detail', }; describe('react router', () => { beforeAll(() => { jest.useFakeTimers(); }); afterAll(() => { jest.useRealTimers(); }); // https://github.com/airbnb/enzyme/issues/875 it('react router 6', () => { const Home = () => { const location = useLocation(); const navigate = useNavigate(); const pathSnippets = location.pathname.split('/').filter(i => i); const extraBreadcrumbItems = pathSnippets.map((_, index) => { const url = `/${pathSnippets.slice(0, index + 1).join('/')}`; return ( {breadcrumbNameMap[url]} ); }); const breadcrumbItems = [ Home , ].concat(extraBreadcrumbItems); return (
navigate('/')}>Home navigate('/apps')}>Application List
Home Page} /> {breadcrumbItems}
); }; const wrapper = mount( , ); expect(wrapper.find('BreadcrumbItem').length).toBe(1); expect(wrapper.find('BreadcrumbItem .ant-breadcrumb-link').at(0).text()).toBe('Home'); wrapper.find('.demo-nav a').at(1).simulate('click'); expect(wrapper.find('BreadcrumbItem').length).toBe(2); expect(wrapper.find('BreadcrumbItem .ant-breadcrumb-link').at(1).text()).toBe( 'Application List', ); }); it('react router 3', () => { const routes = [ { name: 'home', breadcrumbName: 'Home', path: '/', childRoutes: [ { name: 'apps', breadcrumbName: 'Application List', path: 'apps', childRoutes: [ { name: 'app', breadcrumbName: 'Application:id', path: ':id', childRoutes: [ { name: 'detail', breadcrumbName: 'Detail', path: 'detail', }, ], }, ], }, ], }, { name: 'apps', breadcrumbName: 'Application List', path: 'apps', childRoutes: [ { name: 'app', breadcrumbName: 'Application:id', path: ':id', childRoutes: [ { name: 'detail', breadcrumbName: 'Detail', path: 'detail', }, ], }, ], }, { name: 'app', breadcrumbName: 'Application:id', path: ':id', childRoutes: [ { name: 'detail', breadcrumbName: 'Detail', path: 'detail', }, ], }, { name: 'detail', breadcrumbName: 'Detail', path: 'detail', }, ]; const wrapper = mount(); expect(wrapper.render()).toMatchSnapshot(); }); });