react-testing-library: Cannot read property 'location' of undefined react-router hooks (official)

react-testing-library version: "@testing-library/react": "^9.1.3"
react version: "react": "^16.9.0"
node version: v8.16.1
npm (or yarn) version: yarn 1.17.3

Relevant code or config:

const EtapaFormulario = () => {
  const location = useLocation()
  const params = useParams<{ id?: string }>()
  const history = useHistory()
// { ... }
}

Problem description:

When using the react-router hoooks (useLocation, useParams, useHistory), throws the following error:

TypeError: Cannot read property 'location' of undefined

      51 | 
      52 | const EtapaFormulario = () => {
    > 53 |   const location = useLocation()
         |                    ^
      54 |   const params = useParams<{ id?: string }>()
      55 |   const history = useHistory()
      56 | 

      at useLocation (node_modules/react-router/modules/hooks.js:28:10)
      at EtapaFormulario (src/Modules/CalendarioEscolar/Etapa/Formulario/Formulario.tsx:53:20)
      at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:15108:18)
      at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17342:13)
      at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:18486:16)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:347:14)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:397:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:454:31)
      at beginWork$$1 (node_modules/react-dom/cjs/react-dom.development.js:23217:7)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22211:12)
      at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22185:22)
      at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:21878:11)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21419:22)
      at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:24319:3)
      at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:24347:10)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:24436:10)
      at node_modules/react-dom/cjs/react-dom.development.js:24963:7
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:21687:12)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:24962:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:25042:12)
      at node_modules/@testing-library/react/dist/pure.js:86:25
      at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:21643:12)
      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1002:14)
      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1418:12)
      at render (node_modules/@testing-library/react/dist/pure.js:82:26)
    {...}

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 23 (1 by maintainers)

Most upvoted comments

@michaeljblum I use this HoC

import React from 'react'

import { Router, Route } from 'react-router'
import { createMemoryHistory } from 'history'
import { render } from '@testing-library/react'
const history = createMemoryHistory()

export const renderWithRouter = Component => render(
  <Router history={history}>
    <Route component={Component} />
  </Router>
)

and this, on my test:

const render = () => renderWithRouter(EventForm)

+13

yuritoledo on Oct 16, 2019

@michaeljblum I use this HoC

import React from 'react'

import { Router, Route } from 'react-router'
import { createMemoryHistory } from 'history'
import { render } from '@testing-library/react'
const history = createMemoryHistory()

export const renderWithRouter = Component => render(
  <Router history={history}>
    <Route component={Component} />
  </Router>
)

and this, on my test:

const render = () => renderWithRouter(EventForm)

This works for me

+11

brendonco on Jan 17, 2020

Are you following the guide to add the context provider?

https://testing-library.com/docs/example-react-router

+10

alexkrolick on Sep 26, 2019

The context provider for React Router is the Router/MemoryRouter/BrowserRouter component:

  const history = createMemoryHistory()
  const { container, getByText } = render(
+    <Router history={history}>
      <App />
    </Router>
  )

alexkrolick on Oct 15, 2019

How did you fixed it @michaeljblum? I just stumbled upon this, and deleting/reinstalling packages doesn’t work.

lewislbr on Oct 31, 2019