如何在 vue 测试库中模拟 useRoute()答案

【问题标题】：How to mock useRoute() in vue testing library如何在 vue 测试库中模拟 useRoute()
【发布时间】：2022-11-11 10:38:49
【问题描述】：

我在运行一个内部有一行的组件测试时遇到了问题： const route = useRoute()。我收到一个错误：Cannot read properties of undefined (reading 'path')。这是测试：

describe('Tariff card', () => {
  const options = {
    props: {
      name: 'test',
      tariffId: 2,
      price: 3990,
      maxCompanies: 1,
      maxCampaigns: 5,
      tariffNum: 2,
      isFree: false,
      duration: 30,
    },
    global: {
      plugins: [createTestingPinia()],
    },
  }

  it('render tariff card', async () => {

    jest.mock('vue-router', () => ({
      useRoute: jest.fn(() => ({ path: '/' }))
    }))

    render(TariffCard, options)
  })
})

【问题讨论】：

标签： vuejs3 vue-router vue-testing-library

【解决方案1】：

我有一个类似的问题。看来，当在任何地方使用 <script setup> 的组合 API 时，然后执行 const route = useRoute() 将获得非模拟的 useRoute 函数。

您可以使用以下方法解决此问题前你在测试中导入你的组件：

vi.mock('vue-router', () => ({
  useRoute: vi.fn()
}))
// setup your fake route here

但这会将您限制在一条路线上。或者，您必须将useRoute() 调用延迟到安装组件之后。

【讨论】：