Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(zh): review transitions, component-instance, and reusability-composition #2616

Merged
merged 3 commits into from
Feb 22, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 5 additions & 6 deletions docs/zh/guide/advanced/component-instance.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# 组件实例

[`mount`](/api/#mount) 返回一个 `VueWrapper`,提供了许多方便的测试 Vue 组件的方法。有时你可能希望访问底层的 Vue 实例。可以通过 `vm` 属性访问它
[`mount`](/api/#mount) 会返回一个 `VueWrapper`,它提供了许多方便的测试 Vue 组件的方法。有时你可能希望访问底层的 Vue 实例,通过 `vm` 属性访问它即可

## 简单示例

Expand Down Expand Up @@ -40,9 +40,9 @@ test('renders a greeting', () => {

我们可以看到 `msg1` 和 `msg2`!如果定义了 `methods` 和 `computed` 属性,它们也会显示出来。在编写测试时,虽然通常建议对 DOM 进行断言 (使用 `wrapper.html()` 等),但在一些特殊情况下,你可能需要访问底层的 Vue 实例。

## `getComponent` 和 `findComponent` 的使用
## `getComponent` 和 `findComponent` 的用法

`getComponent` 和 `findComponent` 返回一个 `VueWrapper`,与从 `mount` 获取的相似。这意味着你也可以在 `getComponent` 或 `findComponent` 的结果上访问所有相同的属性,包括 `vm`。
`getComponent` 和 `findComponent` 返回一个 `VueWrapper`,与通过 `mount` 获取的相似。这意味着你也可以在 `getComponent` 或 `findComponent` 的结果上访问所有相同的属性,包括 `vm`。

下面是一个简单的示例:

Expand All @@ -65,17 +65,16 @@ test('asserts correct props are passed', () => {
})
```

一种更彻底的测试方式是对渲染的内容进行断言。这样可以确保正确的 prop 被传递*并*渲染。
一种更彻底的测试方式是对渲染的内容进行断言。这样可以确保 prop 被正确地传递*并*渲染。

:::warning 使用 CSS 选择器时的 WrapperLike 类型
例如,当使用 `wrapper.findComponent('.foo')` 时,VTU 将返回 `WrapperLike` 类型。这是因为功能组件需要一个 `DOMWrapper`,否则返回 `VueWrapper`。你可以通过提供正确的组件类型来强制返回 `VueWrapper`:
例如,当使用 `wrapper.findComponent('.foo')` 时,VTU 将返回 `WrapperLike` 类型。这是因为函数式组件需要一个 `DOMWrapper`,否则将返回一个 `VueWrapper`。你可以通过提供正确的组件类型来强制返回一个 `VueWrapper`:

```typescript
wrapper.findComponent('.foo') // 返回 WrapperLike
wrapper.findComponent<typeof FooComponent>('.foo') // 返回 VueWrapper
wrapper.findComponent<DefineComponent>('.foo') // 返回 VueWrapper
```

:::

## 结论
Expand Down
17 changes: 9 additions & 8 deletions docs/zh/guide/advanced/reusability-composition.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ test('increase counter on call', () => {
})
```

对于更复杂的组合式函数,使用了生命周期钩子如 `onMounted` `provide`/`inject` 处理,你可以创建一个简单的测试助手组件。以下组合式函数在 `onMounted` 钩子中获取用户数据。
对于更复杂的,使用了如 `onMounted` 的生命周期钩子或 `provide`/`inject` 的组合式函数,你可以创建一个简单的辅助测试组件。以下组合式函数会在 `onMounted` 钩子中获取用户数据。

```typescript
export function useUser(userId) {
Expand All @@ -51,7 +51,7 @@ export function useUser(userId) {
}
```

要测试这个组合式函数,你可以在测试中创建一个简单的 `TestComponent`。`TestComponent` 应该与真实组件相同的方式使用组合式函数
要测试这个组合式函数,你可以在测试中创建一个简单的 `TestComponent`。`TestComponent` 应该以真实组件相同的方式使用组合式函数

```typescript
// 模拟 API 请求
Expand All @@ -68,7 +68,8 @@ test('fetch user on mount', async () => {
},
setup(props) {
return {
// 调用组合式函数并将所有返回值暴露到我们的组件实例中,以便我们可以通过 wrapper.vm 访问它们
// 调用组合式函数并将所有返回值暴露到我们的组件实例中,
// 以便我们可以通过 wrapper.vm 访问它们
...useUser(props.userId)
}
}
Expand Down Expand Up @@ -108,7 +109,7 @@ provide('my-key', 'some-data')
</script>
```

在这种情况下,你可以渲染一个实际的子组件并测试 `provide` 的正确用法,或者你可以创建一个简单的测试助手组件并将其传递到默认插槽中
在这种情况下,你可以渲染一个实际的子组件并测试 `provide` 的正确用法,或者你可以创建一个简单的辅助测试组件并将其传递到默认插槽中

```typescript
test('provides correct data', () => {
Expand All @@ -130,7 +131,7 @@ test('provides correct data', () => {
})
```

如果你的组件不包含插槽,你可以使用 [`stub`](./stubs-shallow-mount.md#Stubbing-a-single-child-component) 替换子组件为你的测试助手
如果你的组件不包含插槽,你可以使用 [`stub`](./stubs-shallow-mount.md#Stubbing-a-single-child-component) 将一个子组件替换为辅助测试组件

```vue
<template>
Expand Down Expand Up @@ -204,7 +205,7 @@ test('renders correct data', () => {

## 结论

- 测试简单的组合式函数时无需组件和 `@vue/test-utils`
- 创建测试助手组件以测试更复杂的组合式函数
- 创建测试助手组件以测试你的组件是否通过 `provide` 提供正确的数据
- 测试简单的组合式函数时无需额外的组件或 `@vue/test-utils`
- 创建辅助测试组件以测试更复杂的组合式函数
- 创建辅助测试组件以测试你的组件是否通过 `provide` 提供正确的数据
- 使用 `global.provide` 将数据传递给使用 `inject` 的组件
7 changes: 3 additions & 4 deletions docs/zh/guide/advanced/transitions.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,12 +60,11 @@ test('works with transitions', async () => {

## 部分支持

Vue Test Utils 内置的过渡效果模拟比较简单,并不涵盖 Vue 所有的[过渡特性](https://vuejs.org/guide/built-ins/transition)。例如,[JavaScript 钩子](https://vuejs.org/guide/built-ins/transition#javascript-hooks)不被支持。这一限制可能会导致 Vue 发出警告。
Vue Test Utils 内置的过渡效果模拟比较简单,并不涵盖 Vue 所有的[过渡特性](https://vuejs.org/guide/built-ins/transition)。例如它不支持 [JavaScript 钩子](https://vuejs.org/guide/built-ins/transition#javascript-hooks)。这一限制可能会导致 Vue 发出警告。

::: tip
潜在解决方案:

- 你可以通过将 [global stubs transition](../../api/#global-stubs) 设置为 false 来关闭自动模拟。
- 如果需要,你可以创建自己的过渡效果模拟,以处理这些钩子。
- 如果需要,你可以自行模拟过渡效果,以处理这些钩子。
- 你可以在测试中捕获警告以消除它。
:::
:::