时间戳

首页 > 解决方案 > 使用 Enzyme 测试 React Router Links 上的点击行为

reactjs - 使用 Enzyme 测试 React Router Links 上的点击行为

问题描述

虽然我最终试图为这个反应路由器示例中的流程编写酶测试：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}以及此线程，但是，据我所知，该选项对我不可用，因为我正在使用的框架似乎不允许这样做。此外，我认为那篇文章对我遇到的问题无关紧要。也就是说，任何帮助将不胜感激。

标签： reactjsenzymereact-router-v4

解决方案

来自Switch 文档：

渲染第一个孩子<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
});

推荐阅读