常见问题

有关不特定于 Vue 测试的问题，请参阅 主 FAQ。

Vue 测试库是否替代了官方的 @vue/test-utils？

简短回答：是的，是的。如果您使用 Vue 测试库 (VTL)，则无需安装 @vue/test-utils。

更详细的回答：VTL 是建立在 @vue/test-utils 之上的。官方库用于渲染 Vue 组件（通过调用 mount），并公开了一些方法（同时隐藏其他方法）。您可以在 API 部分查看可用方法的完整列表。

我需要安装 DOM 测试库吗？

不用！VTL 从 DOM 测试库导入它需要的所有内容，然后重新导出它。

Vue 测试库提供了哪些查询？

DOM 测试库中的所有查询。有关完整列表，请参阅 查询。

如果我不能使用浅层渲染，如何在测试中模拟组件？

一般来说，您应该避免模拟组件（请参阅 指南原则部分）。

但是，如果您需要模拟，您可以使用 Jest 的 模拟功能 或由 @vue/test-utils 提供的 stubs 键。

import {render} from '@testing-library/vue'
import Component from './Component'

test('Can stub components', () => {
  render(Component, {
    global: {stubs: ['FontAwesomeIcon']},
  })
})

您可以在 VTL 的 GitHub 存储库中查看 工作示例。

如何测试元素是否已出现/已消失？

查看指南中有关可用方法以测试出现和消失的 出现和消失 部分。

如果您想检查元素是否从未渲染，您可能想编写类似以下内容

expect(queryByText('submit')).toBeNull()

// or, if using jest-dom:
import '@testing-library/jest-dom'
expect(queryByText('submit')).not.toBeInTheDocument()

为什么我的 Vue 路由器状态似乎在测试之间共享？

默认情况下，Vue 路由器使用 hash 路由模式，该模式将路由更新存储在 window.location 中。测试运行器（例如 Jest）不会在测试调用之间重置 JSDOM 环境，因此来自先前测试的路由转换可能会泄漏到后续测试中，即使每次调用 render 时都会创建一个新的 Vue 路由器。

为了解决此问题，请使用 abstract 模式传递一个实例化的路由器。abstract 模式不会将路由信息存储在 JSDOM window 上，因此路由信息不会在测试之间泄漏。例如

import {render} from '@testing-library/vue'
import Component from './Component.vue'
import VueRouter from 'vue-router'

test('uses abstract mode for the router', async () => {
  const router = new VueRouter({
    mode: 'abstract',
    routes: [
      // Your routes here
    ],
  })

  const renderResult = render(Component, {
    routes: router,
  })

  // Unlike the router in `hash` mode, the initial routing stack is empty. So,
  // you need to push an initial route to the stack.
  await router.push('/')
})

为了减少样板代码，您可以在整个测试套件中创建一个自定义渲染函数。例如

// test-utils.js

import {render} from '@testing-library/vue'
import VueRouter from 'vue-router'

export async function renderApp(component, options) {
  const router = new VueRouter({
    mode: 'abstract',
    routes: [
      // Your routes here
    ],
  })

  const renderResult = render(component, {
    routes: router,
    ...options,
  })

  // Unlike the router in `hash` mode, the initial routing stack is empty. So,
  // you need to push an initial route to the stack.
  await router.push('/')

  return renderResult
}