From 52caf9223e7937a08eb69f1f731919f501cfefc9 Mon Sep 17 00:00:00 2001 From: Jinjiang Date: Sat, 22 Feb 2025 10:18:40 +0800 Subject: [PATCH 1/3] docs(zh): review transitions --- docs/zh/guide/advanced/transitions.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/docs/zh/guide/advanced/transitions.md b/docs/zh/guide/advanced/transitions.md index bcedce79d..bb6d157ae 100644 --- a/docs/zh/guide/advanced/transitions.md +++ b/docs/zh/guide/advanced/transitions.md @@ -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 来关闭自动模拟。 -- 如果需要，你可以创建自己的过渡效果模拟，以处理这些钩子。 +- 如果需要，你可以自行模拟过渡效果，以处理这些钩子。 - 你可以在测试中捕获警告以消除它。 - ::: +::: From 07668396f271547b114db124f569724c51ac5459 Mon Sep 17 00:00:00 2001 From: Jinjiang Date: Sat, 22 Feb 2025 10:28:52 +0800 Subject: [PATCH 2/3] docs(zh): review component-instance --- docs/zh/guide/advanced/component-instance.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/docs/zh/guide/advanced/component-instance.md b/docs/zh/guide/advanced/component-instance.md index bf1abb743..7d9d3ae79 100644 --- a/docs/zh/guide/advanced/component-instance.md +++ b/docs/zh/guide/advanced/component-instance.md @@ -1,6 +1,6 @@ # 组件实例 -[`mount`](/api/#mount) 返回一个 `VueWrapper`，提供了许多方便的测试 Vue 组件的方法。有时你可能希望访问底层的 Vue 实例。可以通过 `vm` 属性访问它。 +[`mount`](/api/#mount) 会返回一个 `VueWrapper`，它提供了许多方便的测试 Vue 组件的方法。有时你可能希望访问底层的 Vue 实例，通过 `vm` 属性访问它即可。 ## 简单示例 @@ -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`。 下面是一个简单的示例： @@ -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('.foo') // 返回 VueWrapper wrapper.findComponent('.foo') // 返回 VueWrapper ``` - ::: ## 结论 From 016d4007244fb6aef6ae36fa670dd784001aa2e1 Mon Sep 17 00:00:00 2001 From: Jinjiang Date: Sat, 22 Feb 2025 10:54:41 +0800 Subject: [PATCH 3/3] docs(zh): review reusability-composition --- .../guide/advanced/reusability-composition.md | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/docs/zh/guide/advanced/reusability-composition.md b/docs/zh/guide/advanced/reusability-composition.md index b08c7f4de..347b94168 100644 --- a/docs/zh/guide/advanced/reusability-composition.md +++ b/docs/zh/guide/advanced/reusability-composition.md @@ -35,7 +35,7 @@ test('increase counter on call', () => { }) ``` -对于更复杂的组合式函数，使用了生命周期钩子如 `onMounted` 或 `provide`/`inject` 处理，你可以创建一个简单的测试助手组件。以下组合式函数在 `onMounted` 钩子中获取用户数据。 +对于更复杂的，使用了如 `onMounted` 的生命周期钩子或 `provide`/`inject` 的组合式函数，你可以创建一个简单的辅助测试组件。以下组合式函数会在 `onMounted` 钩子中获取用户数据。 ```typescript export function useUser(userId) { @@ -51,7 +51,7 @@ export function useUser(userId) { } ``` -要测试这个组合式函数，你可以在测试中创建一个简单的 `TestComponent`。`TestComponent` 应该与真实组件相同的方式使用组合式函数。 +要测试这个组合式函数，你可以在测试中创建一个简单的 `TestComponent`。`TestComponent` 应该以真实组件相同的方式使用组合式函数。 ```typescript // 模拟 API 请求 @@ -68,7 +68,8 @@ test('fetch user on mount', async () => { }, setup(props) { return { - // 调用组合式函数并将所有返回值暴露到我们的组件实例中，以便我们可以通过 wrapper.vm 访问它们 + // 调用组合式函数并将所有返回值暴露到我们的组件实例中， + // 以便我们可以通过 wrapper.vm 访问它们 ...useUser(props.userId) } } @@ -108,7 +109,7 @@ provide('my-key', 'some-data') ``` -在这种情况下，你可以渲染一个实际的子组件并测试 `provide` 的正确用法，或者你可以创建一个简单的测试助手组件并将其传递到默认插槽中。 +在这种情况下，你可以渲染一个实际的子组件并测试 `provide` 的正确用法，或者你可以创建一个简单的辅助测试组件并将其传递到默认插槽中。 ```typescript test('provides correct data', () => { @@ -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