4

我正在尝试检查此组件中的回退导航:

class BackMore extends Component {
  render() {
    return (
      <div className="backMore">
        <div className="back" onClick={ this.props.history.goBack } data-testid="go-back">
          <FontAwesomeIcon icon={faArrowLeft} />
        </div>
        <span className="title">{ this.props.title }</span>
        <More/>
      </div>)
  }
}

export default withRouter(BackMore)

我使用页面https://testing-library.com/docs/example-react-routertesting-library中的配方

// test utils file
function renderWithRouter(
  ui,
  {
    route = '/',
    history = createMemoryHistory({ initialEntries: [route] }),
  } = {}
) {
  const Wrapper = ({ children }) => (
    <Router history={history}>{children}</Router>
  )
  return {
    ...render(ui, { wrapper: Wrapper }),
    // adding `history` to the returned utilities to allow us
    // to reference it in our tests (just try to avoid using
    // this to test implementation details).
    history,
  }
}

这是我的测试:

test('Go back in the history', () =>{
  const browserHistory = createMemoryHistory()
  browserHistory.push('/my-learning');
  const { history } = RenderWithRouter(<BackMore />, { route: ['my-learning'], history: browserHistory });
  userEvent.click(screen.getByTestId(/go-back/i));
  expect(history.location.pathname).toBe('/')
})

变量是“我的history.location.pathname学习”,它应该是“/”

有什么问题?

4

0 回答 0