Fondo

Estoy probando si una página cambia al hacer clic en un botón dentro de mi proyecto reactjs . El enrutamiento y el cambio de páginas son manejados por react-router . Hay un botón que redirige la página a /my-page .

Código de muestra

Aquí está el código:

 <button type="submit" onClick={() => history.push("/my-page")}>Go to my page</button>

Así es como estoy tratando de probar esta funcionalidad:

 test('should navigate to /my-page on [Go to my page] button click', () => { const history = createMemoryHistory() render( <MemoryRouter history={history}> <App /> </MemoryRouter>, container ) const myButton = screen.queryByText('Go to my page') // Neither of these methods actually does the clicking. // myButton.dispatchEvent(new MouseEvent("click", { bubbles: true })); // fireEvent.click(myButton) userEvent.click(myButton) expect(history.location.pathname).toBe('/my-page') })

Aquí está la salida de error al ejecutar npm test :

 expect(received).toBe(expected) // Object.is equality Expected: "/my-page" Received: "/"

Notas al margen:

• screen.queryByText('Go to my page') encuentra el botón requerido.
• la misma funcionalidad funciona normalmente cuando se ejecuta en un navegador

¿Que me estoy perdiendo aqui?

Actualizar

Parece que ejecutar el componente de prueba por sí mismo, separado de otros componentes de prueba que representan diferentes páginas, está causando que falle de alguna manera. Creo que podría estar fallando al destruir componentes renderizados previamente.