测试点击行为上反应与酶路由器链接(testing click behavior on React R

虽然我最终想要写一个酶试验对该流反应路由器例如： https://reacttraining.com/react-router/web/example/auth-workflow

import React from 'react';
import ReactDOM from 'react-dom';
import Enzyme, { shallow, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { MemoryRouter, Route, Switch, Link } from 'react-router-dom';

const Home = () => <div>Home</div>;
const MockComp = () => (
  <div className="protected">
    <nav>hi</nav>
    Protected
  </div>
);
const MockDenied = () => <div className="denied">Denied</div>;

test('Renders visited protected component if authorized', () => {
  const wrapper = mount(
    <MemoryRouter initialEntries={['/']}>
      <div>
        <Link to="/foo" />
        <Switch>
          <Route path="/" component={Home} />
          <Route path="/401" component={MockDenied} />
          <ProtectedRouteBasic
            path="/foo"
            auth={{ hasAuth: true }}
            component={MockComp}
          />
        </Switch>
      </div>
    </MemoryRouter>
  );
  wrapper.find('a').simulate('click', { button: 0 });
  expect(wrapper.find('.protected').length).toEqual(1);
  expect(wrapper.find('.denied').length).toEqual(0);
});

我发现了一些问题，并试图剥开的复杂性和再慢慢重新引入，我已经删除的元素。

所以，我降落在这个测试正如我需要让工作继续进行：

test('Clicking link will render component associated with path', () => {
  const wrapper = mount(
    <MemoryRouter>
      <div>
        <Link to="/foo" />
        <Switch>
          <Route path="/" component={Home} />
          <Route path="/foo" component={MockComp} />
        </Switch>
      </div>
    </MemoryRouter>
  );
  wrapper.find('a').simulate('click', { button: 0 });
  expect(wrapper.find('.protected')).toHaveLength(1);
});

然而，这个试验不按预期工作，因为我想到了测试，在当前状态下通过。我读过这个线程来更新我的simulate呼叫包括{button: 0}以及本线大约在功能部件环绕整个路由器，然而，这种选择是不提供给我，据我所知，由于框架我工作似乎并没有允许它。此外，我认为，这一块是不重要的，我遇到的问题。这就是说，任何帮助，将不胜感激。

从交换机文档：

使得第一子<Route>或<Redirect>该位置相匹配。

在这种情况下<Route path="/" component={Home} />匹配时的路径是/和/foo所以Home总是呈现。

您可以通过使用解决这个exact所以它只匹配，如果路径是完全/ ，或将其移动到年底Route列表，以便其他路线首先匹配：

test('Clicking link will render component associated with path', () => {
  const wrapper = mount(
    <MemoryRouter>
      <div>
        <Link to="/foo" />
        <Switch>
          <Route path="/foo" component={MockComp} />
          <Route path="/" component={Home} />
        </Switch>
      </div>
    </MemoryRouter>
  );
  wrapper.find('a').simulate('click', { button: 0 });
  expect(wrapper.find('.protected')).toHaveLength(1);  // SUCCESS
});