Theo's Typesafe Cult•3y ago

Jest on dynamic routing

Doing unit tests on Nextjs page with route of id, how do I pass in the query of id to not get the Error: Uncaught [TypeError: Cannot read property 'query' of null] error?

import Scholarship from '../pages/scholarship/[id]'

describe('Single scholarship page', () => {
  beforeEach(() => {})

  it('Renders scholarship page with the correct info', async () => {
    const { getByText, getByTestId } = render(<Scholarship />)
    // ...

import Scholarship from '../pages/scholarship/[id]'

describe('Single scholarship page', () => {
  beforeEach(() => {})

  it('Renders scholarship page with the correct info', async () => {
    const { getByText, getByTestId } = render(<Scholarship />)
    // ...

2 Replies

AndrewOP•3y ago

do I need to mock the router or something else?

AndrewOP•3y ago

Update: you have to mock next/router ie something like the following at the top of the file:

// mock router
jest.mock('next/router', () => ({
  useRouter() {
    return {
      query: { id: '1' },
    }
  },
}))

// mock router
jest.mock('next/router', () => ({
  useRouter() {
    return {
      query: { id: '1' },
    }
  },
}))

Ref: https://stackoverflow.com/a/69126334/12539335

Stack Overflow

Mocking NextJS router events with Jest

I am trying to mock NextJS router events with Jest. Found a relevant resource right here at NextJS router & Jest. The implementation there is very similar to mine. However, the solution mentioned

Gaming

Programming

Jest on dynamic routing