如何动态更新next/router对应jest.mock中的query参数

可以实现，你原来的写法不生效是因为jest.mock会被提升到文件作用域最顶部执行，多次声明只会以最后一次的定义为准，无法按测试块动态切换返回值，你可以按以下方案实现：

实现步骤 #

1. 首先在测试文件顶部做基础mock，将useRouter声明为Jest模拟函数：

import { useRouter } from 'next/router'

jest.mock('next/router', () => ({
  useRouter: jest.fn()
}))

2. 在不同测试块中通过mockReturnValue方法动态指定返回的query值即可，你可以用beforeEach让配置对整个测试块生效：

describe('test block 1 ', () => {
  beforeEach(() => {
    useRouter.mockReturnValue({
      query: {
        'block-number': ['block', '1']
      },
      // 补充你业务中用到的其他router属性，避免测试报错，例如：
      push: jest.fn(),
      replace: jest.fn()
    })
  })

  test('Renders block 1', async () => {
    // 测试逻辑
  })
})

describe('test block 2 ', () => {
  beforeEach(() => {
    useRouter.mockReturnValue({
      query: {
        'block-number': ['block', '2']
      },
      push: jest.fn(),
      replace: jest.fn()
    })
  })

  test('Renders block 2', async () => {
    // 测试逻辑
  })
})

补充说明 #

如果你只需要针对单个测试用例修改返回值，不用beforeEach，直接在对应测试用例内部调用useRouter.mockReturnValue即可，灵活度更高。

内容的提问来源于stack exchange，提问作者user6248190