it appears that the click on CardLink not triggering navigation in react router
test("should navigate to court page when clicking on a specific court card", async () => {
render(<Home />)
userEvent.click(
screen.getByRole("link", {
name: /aaaaaa/i
})
)
await screen.findByRole("heading", {
name: /bbbbbbbbbbbb/i
})
})
the Card code:
<CardImg top width="50%" src={courtImg} alt="Card image cap" />
<CardBody className="med-home-card__body">
<CardLink
to="/dossiers/première-instance"
onClick={() => {
setTribunal("premiere-instance")
setTribunalAffAr("abaabab")
}}
tag={RRNavLink}
>
<CardTitle className="med-home-card__title" tag={myTag}>
{intlContext.messages.CourtOfFirstInstance}
</CardTitle>
</CardLink>{" "}
</CardBody>
</Card>
this is my test utils wrapper:
import { render as rtlRender } from "@testing-library/react"
import { Provider } from "react-redux"
import { MemoryRouter } from "react-router"
// Import your own store
import { store } from "@store/storeConfig/store"
// ** Toast, Int, & ThemeColors Context
import ability from "@src/configs/acl/ability"
import { ThemeContext } from "../context/ThemeColors"
import { IntlProviderWrapper } from "../context/Internationalization"
import { AbilityContext } from "../context/Can"
import {TribunalContextProvider } from "../context/Tribunal"
function render(ui, { ...renderOptions } = {}) {
function Wrapper({ children }) {
return (
<Provider store={store}>
<AbilityContext.Provider value={ability}>
<ThemeContext>
<IntlProviderWrapper>
<TribunalContextProvider>
<MemoryRouter>{children}</MemoryRouter>
</TribunalContextProvider>
</IntlProviderWrapper>
</ThemeContext>
</AbilityContext.Provider>
</Provider>
)
}
return {
...rtlRender(ui, {
wrapper: Wrapper,
...renderOptions
}),
// adding `store` to the returned utilities to allow us
// to reference it in our tests (just try to avoid using
// this to test implementation details).
store
}
}
// re-export everything
export * from "@testing-library/react"
// override render method
export { render }
thanks for any suggestion
