test: breadcrumd work with react-router

components/breadcrumb/__tests__/router.test.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Route, Switch, Link, withRouter, MemoryRouter } from 'react-router-dom';
+import { Breadcrumb } from 'antd';
+import { mount } from 'enzyme';
+
+const Apps = () => (
+  <ul className="app-list">
+    <li>
+      <Link to="/apps/1">Application1</Link>：<Link to="/apps/1/detail">Detail</Link>
+    </li>
+    <li>
+      <Link to="/apps/2">Application2</Link>：<Link to="/apps/2/detail">Detail</Link>
+    </li>
+  </ul>
+);
+
+const breadcrumbNameMap = {
+  '/apps': 'Application List',
+  '/apps/1': 'Application1',
+  '/apps/2': 'Application2',
+  '/apps/1/detail': 'Detail',
+  '/apps/2/detail': 'Detail',
+};
+
+const Home = withRouter((props) => {
+  const { location, history } = props;
+  const pathSnippets = location.pathname.split('/').filter(i => i);
+  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
+    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
+    return (
+      <Breadcrumb.Item key={url}>
+        <Link to={url}>
+          {breadcrumbNameMap[url]}
+        </Link>
+      </Breadcrumb.Item>
+    );
+  });
+  const breadcrumbItems = [(
+    <Breadcrumb.Item key="home">
+      <Link to="/">Home</Link>
+    </Breadcrumb.Item>
+  )].concat(extraBreadcrumbItems);
+  return (
+    <div className="demo">
+      <div className="demo-nav">
+        <a onClick={() => history.push('/')}>Home</a>
+        <a onClick={() => history.push('/apps')}>Application List</a>
+      </div>
+      <Switch>
+        <Route path="/apps" component={Apps} />
+        <Route render={() => <span>Home Page</span>} />
+      </Switch>
+      <Breadcrumb>
+        {breadcrumbItems}
+      </Breadcrumb>
+    </div>
+  );
+});
+
+describe('react router', () => {
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+  // https://github.com/airbnb/enzyme/issues/875
+  it('react router 4', () => {
+    const wrapper = mount(
+      <MemoryRouter initialEntries={['/']} initialIndex={0}>
+        <Home />
+      </MemoryRouter>
+    );
+    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');
+  });
+});

package.json

@@ -153,6 +153,7 @@
     "react-github-button": "^0.1.1",
     "react-infinite-scroller": "^1.0.15",
     "react-intl": "^2.0.1",
+    "react-router-dom": "^4.2.2",
     "react-sublime-video": "^0.2.0",
     "react-virtualized": "~9.19.0",
     "remark-frontmatter": "^1.1.0",