Frontend Academy · 课时

@testing-library/vue：挂载组件

使用 @testing-library/vue 挂载 Vue 组件，提供属性和全局插件，模拟用户事件，并断言渲染出的模板。

@testing-library/vue：挂载组件 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

Vue 版 Testing Library

@testing-library/vue 为 Vue 3 组件提供了同样以用户为中心的测试方式。其 API 与 React 版本相似：render()、screen 查询、userEvent 和 jest-dom 匹配器。

安装

安装 Vue 版测试库包。

npm install -D @testing-library/vue @testing-library/user-event @testing-library/jest-dom
# Also install vitest for a Vite project:
npm install -D vitest jsdom

Vue 中的 render()

render(Component, options) 会挂载 Vue 组件。使用选项对象传入属性、全局插件和设置选项。

import { render, screen } from '@testing-library/vue';
import Button from './Button.vue';

test('renders button label', () => {
  render(Button, { props: { label: 'Submit' } });
  expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
});

传递属性

在选项对象中传递属性。如果使用 defineProps()，TypeScript 会检查属性类型。

render(UserCard, {
  props: {
    user: { id: 1, name: 'Alice', email: 'alice@example.com' }
  }
});

提供全局插件

在 global 选项中传入全局配置（插件、组件和 provide 值）。

import { createPinia } from 'pinia';
import router from './router';

render(App, {
  global: {
    plugins: [createPinia(), router],
    provide: { theme: 'dark' }
  }
});

可复用的 renderWithPlugins 辅助函数

创建一个包含测试所需全部插件的自定义渲染包装器，避免在每个测试中重复设置。

// test-utils.ts
import { render } from '@testing-library/vue';
import { createPinia } from 'pinia';

export function renderWithSetup(component: any, options = {}) {
  return render(component, {
    global: { plugins: [createPinia()] },
    ...options
  });
}

测试事件

使用 userEvent 与组件交互，然后断言用户看到的内容，或断言已发生发出的事件。

import userEvent from '@testing-library/user-event';

test('emits submit on form submit', async () => {
  const user = userEvent.setup();
  const { emitted } = render(LoginForm);

  await user.type(screen.getByLabelText('Email'), 'alice@example.com');
  await user.click(screen.getByRole('button', { name: /login/i }));

  expect(emitted().submit[0]).toEqual([{ email: 'alice@example.com' }]);
});

测试插槽

在渲染选项中以字符串或组件的形式传入插槽内容。

render(Card, {
  slots: {
    default: '<p>Card body content</p>',
    header: '<h2>My Card Title</h2>'
  }
});

expect(screen.getByText('Card body content')).toBeInTheDocument();

测试 v-model 行为

使用 userEvent 填写输入内容，并验证发出的事件或显示的输出是否与预期更新后的状态相匹配。

测试 Pinia 存储

为每个测试创建一个全新的 Pinia 实例。直接修改存储状态进行设置，然后断言渲染结果。

const pinia = createPinia();
render(Counter, { global: { plugins: [pinia] } });

const store = useCounterStore();
store.count = 5; // set initial state
await nextTick();

expect(screen.getByText('5')).toBeInTheDocument();

查找异步更新后的元素

Vue 会异步更新 DOM。在触发导致异步状态变化的事件后，使用 await nextTick() 或 findBy* 查询。

import { nextTick } from 'vue';

await user.click(button);
await nextTick();
expect(screen.getByText('Updated!')).toBeInTheDocument();

快速检查

如何将 Pinia 或 Vue Router 传递给使用 @testing-library/vue 测试的组件？

回顾：@testing-library/vue

render(Component, options) 会挂载 Vue 组件。在 options.props 中传递属性。在 global.plugins 中提供插件。使用 emitted() 检查自定义事件。在 options.slots 中传递插槽。使用 await nextTick() 等待 Vue 的异步更新。创建自定义的 renderWithSetup() 包装器，以完成共享插件设置。

常见问题解答

「@testing-library/vue：挂载组件」课时是免费的吗？

是的 — 「@testing-library/vue：挂载组件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「@testing-library/vue：挂载组件」这节课中我会学到什么？

使用 @testing-library/vue 挂载 Vue 组件，提供属性和全局插件，模拟用户事件，并断言渲染出的模板。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「@testing-library/vue：挂载组件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

Jest 设置与基础测试
@testing-library/react：render 与 userEvent
@testing-library/vue：挂载组件
模拟模块与 API 调用

← 返回 Frontend Academy