Тестирование с использованием Jest и Enzyme: как ориентироваться в React Router DOM

Question

Я пытаюсь написать интеграционный тест для приложения React, созданного в рамках курса Udemy.Приложение использует react-router-dom, и я хочу смоделировать нажатие на Link, которое должно изменить маршрут, а затем проверить что-то на экране, соответствующее новому маршруту.

Я смог mount компонент приложения, использующий Enzyme, но я не могу успешно перемещаться в тестовой среде:

import React from 'react'
import { mount } from 'enzyme'
import { MemoryRouter } from 'react-router-dom'
import Root from 'src/Root'
import App from 'src/components/App'

it('navigates to the post screen when clicking the post button', () => {
  const wrapped = mount(
    // My Root component wraps the children with a Redux Provider
    <Root initialState={{ auth: true }}>
      <MemoryRouter>
        <App />
      </MemoryRouter>
    </Root>
  )

  // Click on the post button
  wrapped.find('a.post-link').simulate('click')
  // Update the component, hoping that the navigation would take effect
  wrapped.update()
  // Expecting to find a CommentBox, which is what is rendered by the '/post' Route
  // Unfortunately, it seems that the navigation either didn't occur or is still ongoing, as the test fails: there are 0 CommentBox components found.
  expect(wrapped.find('CommentBox').length).toEqual(1)
})

Это мой компонент приложения, для справки:

import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import { connect } from 'react-redux'
import CommentBox from 'src/components/CommentBox'
import CommentList from 'src/components/CommentList'
import * as actions from 'src/actions'

class App extends Component {
  renderButton() {
    const { auth, changeAuth } = this.props
    return (
      <button
        onClick={() => changeAuth(!auth)}
        className="auth-button"
      >
        Sign {auth ? 'out' : 'in'}
      </button>
    )
  }

  renderHeader() {
    return (
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link className="post-link" to="/post">Post a comment</Link>
        </li>
        <li>
          {this.renderButton()}
        </li>
      </ul>
    )
  }

  render() {
    return (
      <div>
        {this.renderHeader()}
        <Route path="/post" component={CommentBox} />
        <Route path="/" exact component={CommentList} />
      </div>
    )
  }
}

function mapStateToProps(state) {
  return { auth: state.auth }
}

export default connect(mapStateToProps, actions)(App)