тестирование поведения нажатия на React Router Links с помощью Enzyme - PullRequest
Новая
       22

тестирование поведения нажатия на React Router Links с помощью Enzyme

0 голосов
/ 20 февраля 2019

В то время как я в конечном итоге пытаюсь написать энзимный тест для потока в этом примере маршрутизатора реагирования: 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}, а также эту ветку об упаковке всего маршрутизатора в функциональный компонент, однако эта опциянасколько мне известно, мне это недоступно, так как фреймворк , с которым я работаю, , похоже, этого не позволяет.Кроме того, я считаю, что эта часть не имеет значения для моей проблемы.Тем не менее, любая помощь будет высоко ценится.

1 Ответ

0 голосов
/ 20 февраля 2019

Из Переключить документы :

Отображает первого дочернего элемента <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
});
...