Как протестировать реакцию-роутер-дом?

Question

проблема

Я прочитал https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/testing.md

Я хочу проверить react-router-domМне все равно, как это работает, мне просто нужно убедиться, что библиотека работает в моем шаблоне проекта.

репродукция

Я тестирую этот компонент

    <Link to="/toto">
      toto
    </Link>

Это тест

  it('it expands when the button is clicked', () => {
    const renderedComponent = mount(<Wrapper>
      <MemoryRouter initialEntries={['/']}>
        <Demo />
      </MemoryRouter>
    </Wrapper>);
    renderedComponent.find('a').simulate('click');
    expect(location.pathname).toBe('toto');
  });

ожидаемый

быть true

Результат

blank

Вопрос

Как я могу проверить react-router-dom?

Answer 1

Если вы посмотрите на код для LinkВы видите этот код:

handleClick = event => {
    if (this.props.onClick) this.props.onClick(event);

    if (
      !event.defaultPrevented && // onClick prevented default
      event.button === 0 && // ignore everything but left clicks
      !this.props.target && // let browser handle "target=_blank" etc.
      !isModifiedEvent(event) // ignore clicks with modifier keys
    ) {
      event.preventDefault();

      const { history } = this.context.router;
      const { replace, to } = this.props;

      if (replace) {
        history.replace(to);
      } else {
        history.push(to);
      }
    }
  };

Итак, по-видимому, вы найдете Link вместо a и переопределить этот метод, чтобы вернуть значение для вашего собственного обратного вызова, вы можете проверить путь, установленный на <Link>Это напрямую не проверяется react-router но это подтвердит, что пути, которые вы указали в своей ссылке, являются правильными, что, как кажется, проверяют ваши тесты.

Так что-то вроде (непроверенный код):

const link = renderedComponent.find(Link)
let result = null
link.handleClick = event => {

      const { replace, to } = link.props;

      if (replace) {
         result = null //we are expecting a push
      } else {
        result = to
      }
    }
  };
link.simulate('click')
expect(result).toEqual('/toto') // '/toto' or 'toto'?

ОБНОВИТЬ

Однако я понял, что вышесказанное не работает с поверхностным рендером, если вы просто хотите проверить, to свойство является правильным, вы можете просто сделать это с expect(link.props.to).toEqual('/toto'),