reactjs - reach/router navigate not updating history object with react-testing-library

Question

The below test continues to fail. On button click it calls @reach/router navigate with a query string /?searchString=abcde however the history object is not updated in the test. How do you test programmatic navigation updates with react-testing-library and reach-router without mocking.

import { createHistory, createMemorySource, LocationProvider, navigate } from "@reach/router"
import { render, waitFor } from "@testing-library/react"
import userEvent from "@testing-library/user-event"
import React from 'react'

test('Can us search path', async () => {
  const history = createHistory(createMemorySource('/'))
  const page = render(
      <LocationProvider history={history}>
        <div>
          <button onClick={() => navigate('/?searchString=abcde')}>navigateButton</button>
        </div>)
      </LocationProvider>
  )
  expect(history.location.search).toEqual('')
  userEvent.click(page.getByText('navigateButton')) //click button to call navigate
  await waitFor(() => expect(history.location.search).toEqual('searchString=abcde')) //FAILS but Should PASS
})

dependencies

  "@testing-library/react": "^11.2.3",
  "@testing-library/user-event": "^12.6.0",
  "@testing-library/jest-dom": "^5.11.9",
  "react": "^17.0.1",
  "react-dom": "^17.0.1",
  "@reach/router": "^1.3.4",

question from:https://stackoverflow.com/questions/65846937/reach-router-navigate-not-updating-history-object-with-react-testing-library

Answer 1

Waitting for answers