From 778481cd766fe597844f4b249e574c17efe6f7ef Mon Sep 17 00:00:00 2001 From: Jinjiang Date: Tue, 25 Feb 2025 20:14:48 +0800 Subject: [PATCH 1/4] docs(zh): review vue-router --- docs/zh/guide/advanced/vue-router.md | 62 ++++++++++++++-------------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/docs/zh/guide/advanced/vue-router.md b/docs/zh/guide/advanced/vue-router.md index 921837545..163f4d920 100644 --- a/docs/zh/guide/advanced/vue-router.md +++ b/docs/zh/guide/advanced/vue-router.md @@ -1,8 +1,8 @@ # 测试 Vue Router -本文将介绍两种方法测试使用 Vue Router 的应用程序： +本文将介绍两种测试带有 Vue Router 的应用的方法： -1. 使用真实的 Vue Router，这种方法更接近生产环境，但在测试较大应用时可能会导致复杂性。 +1. 使用真实的 Vue Router，这种方法更接近生产环境，但测试较大应用时会引入复杂度。 2. 使用模拟的路由器，允许对测试环境进行更细粒度的控制。 请注意，Vue Test Utils 并未提供任何特殊函数来辅助测试依赖于 Vue Router 的组件。 @@ -11,11 +11,11 @@ 使用模拟路由器可以避免在单元测试中关注 Vue Router 的实现细节。 -我们可以创建一个仅实现我们感兴趣的功能的模拟版本，而不是使用真实的 Vue Router 实例。可以使用 `jest.mock` (如果你使用 Jest) 和 `global.components` 的组合来实现。 +我们可以创建一个模拟的 Vue Router 实例，仅实现我们感兴趣的功能，而不是使用真实的实例。这可以通过 `jest.mock` (如果你使用 Jest) 和 `global.components` 的组合来实现。 -在模拟依赖时，通常是因为**我们不关心测试其行为**。我们不想测试点击 `` 是否导航到正确的页面，我们可能更关心的是确保 `` 拥有正确的 `to` 属性。 +在我们模拟一个依赖时，通常是因为**我们不测试它的行为**。我们不想测试点击 `` 是否会导航到正确的页面，它显然是会的。我们可能更关心的是确保 `` 拥有正确的 `to` 属性。 -让我们来看一个更实际的例子！这个组件展示了一个按钮，当用户经过身份验证时，会将其重定向到编辑帖子页面 (基于当前路由参数)。未经过身份验证的用户则会被重定向到 `/404` 路由。 +让我们来看一个更实际的例子！这个组件展示了一个按钮，当用户通过身份验证时，会将其重定向到编辑帖子的页面 (基于当前路由参数)。未经过身份验证的用户则会被重定向到 `/404` 路由。 ```js const Component = { @@ -33,7 +33,7 @@ const Component = { } ``` -我们可以使用真实的路由器，然后导航到该组件的正确路由，点击按钮后断言正确的页面是否被渲染……然而，对于相对简单的测试来说，这需要很多设置。我们想要编写的测试核心是 “如果经过身份验证，则重定向到 X，否则重定向到 Y”。下面是如何使用 `global.mocks` 属性模拟路由的示例： +我们可以使用真实的路由器，然后导航到该组件的正确路由，然后点击按钮后断言正确的页面被渲染……然而，对于相对简单的测试来说，这需要很多设置。我们想要编写的测试核心是 “如果经过身份验证，则重定向到 X，否则重定向到 Y”。下面是如何使用 `global.mocks` 属性模拟路由的示例： ```js import { mount } from '@vue/test-utils' @@ -95,19 +95,19 @@ test('redirect an unauthenticated user to 404', async () => { }) ``` -我们使用 `global.mocks` 提供了必要的依赖 (`this.$route` 和 `this.$router`)，为每个测试设置了理想状态。 +我们使用 `global.mocks` 提供了必要的依赖 (`this.$route` 和 `this.$router`)，为每个测试设置了理想的状态。 然后，我们能够使用 `jest.fn()` 监控 `this.$router.push` 被调用的次数和参数。最重要的是，我们不必在测试中处理 Vue Router 的复杂性或注意事项！我们只关注测试应用逻辑。 :::tip -你可能想以端到端的方式测试整个系统。可以考虑使用 [Cypress](https://www.cypress.io/) 进行使用真实浏览器的完整系统测试。 +你可能想以端到端 (end-to-end) 的方式测试整个系统。可以考虑使用 [Cypress](https://www.cypress.io/) 通过真实浏览器进行完整的系统测试。 ::: ## 使用真实路由器 -现在我们已经看到了如何使用模拟路由器，让我们看看如何使用真实的 Vue Router。 +我们已经看到了如何使用模拟路由器，现在让我们看看如何使用真实的 Vue Router。 -我们来创建一个基本的博客应用程序，使用 Vue Router。帖子在 `/posts` 路由上列出： +我们来创建一个基本的使用 Vue Router 的博客应用程序。帖子会在 `/posts` 路由上列出： ```js const App = { @@ -134,7 +134,7 @@ const Posts = { } ``` -应用程序显示一个指向 `/posts` 的 ``，在该路由下我们列出帖子。 +应用程序根页面会显示一个 `` 指向列出帖子的路由 `/posts`。 真实路由器如下所示。请注意，我们将路由单独导出，以便可以为每个单独的测试实例化一个新的路由器。 @@ -164,7 +164,7 @@ export { routes } export default router ``` -验证使用 Vue Router 测试应用程序的最佳方法是让警告引导我们。以下最小测试足以让我们开始： +使用 Vue Router 测试一个应用的最佳展示方法是通过警告引导我们。以下最小化的测试足以让我们起步： ```js import { mount } from '@vue/test-utils' @@ -175,7 +175,7 @@ test('routing', () => { }) ``` -测试失败。它还打印了两个警告： +这个测试失败了，且它还打印了两个警告： ```bash console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:39 @@ -185,7 +185,7 @@ console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:39 [Vue warn]: Failed to resolve component: router-view ``` -找不到 `` 和 `` 组件。我们需要安装 Vue Router！由于 Vue Router 是一个插件，我们使用 `global.plugins` 挂载选项来安装它： +`` 和 `` 组件未找到。我们需要安装 Vue Router！由于 Vue Router 是一个插件，我们通过 `global.plugins` 挂载选项来安装它： ```js {12,13,14} import { mount } from '@vue/test-utils' @@ -207,16 +207,16 @@ test('routing', () => { }) ``` -这两个警告现在消失了——但现在我们又有了另一个警告： +这两个警告现在消失了，但现在我们又有了另一个警告： ```js console.warn node_modules/vue-router/dist/vue-router.cjs.js:225 [Vue Router warn]: Unexpected error when starting the router: TypeError: Cannot read property '_history' of null ``` -虽然警告的内容并不完全明确，但它与 Vue Router 4 **处理路由是异步的**有关。 +虽然警告的内容并不完全明确，但它与 **Vue Router 4 异步处理路由**的事实有关。 -Vue Router 提供了一个 `isReady` 函数，告诉我们路由器何时准备就绪。然后我们可以 `await` 它，以确保初始导航已发生。 +Vue Router 提供了一个 `isReady` 函数，告诉我们路由器何时准备就绪。然后我们可以 `await` 它，以确保初始导航已生效。 ```js {13,14} import { mount } from '@vue/test-utils' @@ -243,9 +243,9 @@ test('routing', async () => { }) ``` -测试现在通过了！这确实需要一些工作，但现在我们确保应用程序正确导航到初始路由。 +测试现在通过了！这确实需要一些工作，但现在我们确保了应用程序正确导航到初始路由。 -现在让我们导航到 `/posts`，确保路由按预期工作： +现在让我们导航到 `/posts` 并确保路由如预期工作： ```js {21,22} import { mount } from '@vue/test-utils' @@ -284,9 +284,9 @@ console.error node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:211 TypeError: Cannot read property '_history' of null ``` -同样，由于 Vue Router 4 的新异步特性，我们需要在进行任何断言之前 `await` 路由完成。 +同样，由于 Vue Router 4 新的异步特性，我们需要在进行任何断言之前 `await` 路由完成。 -然而，在这种情况下，我们没有可以等待的 *hasNavigated* 钩子。一种替代方法是使用从 Vue Test Utils 导出的 `flushPromises` 函数： +然而，在这种情况下，我们没有可以 await 的 *hasNavigated* 钩子。一种替代方法是使用从 Vue Test Utils 导出的 `flushPromises` 函数： ```js {1,22} import { mount, flushPromises } from '@vue/test-utils' @@ -315,7 +315,7 @@ test('routing', async () => { }) ``` -它*终于*通过了。太好了！然而，这一切都非常手动——而且这是针对一个微小且无关紧要的应用程序。这就是在使用 Vue Test Utils 测试 Vue 组件时，使用模拟路由器是一种常见方法的原因。如果你倾向于继续使用真实的路由器，请记住每个测试都应该使用自己实例化的路由器，如下所示： +它*终于*通过了。太好了！然而，这一切都非常手动，而且这是针对一个微小且无关紧要的应用程序。这就是在为什么使用 Vue Test Utils 测试 Vue 组件时，使用模拟路由器是一种常见方法。如果你倾向于继续使用真实的路由器，请记住每个测试都应该使用自己实例化的路由器，如下所示： ```js {1,19} import { mount, flushPromises } from '@vue/test-utils' @@ -347,11 +347,11 @@ test('routing', async () => { }) ``` -## 在组合式 API 中使用模拟路由器 +## 在模拟路由器中使用组合式 API Vue Router 4 允许在组合式 API 的 `setup` 函数中使用路由器和路由。 -考虑将相同的示例组件重写为组合式 API。 +设想通过组合式 API 重写一个相同的 demo 组件。 ```js import { useRouter, useRoute } from 'vue-router' @@ -378,7 +378,7 @@ const Component = { } ``` -这次为了测试组件，我们将使用 Jest 模拟导入的资源 `vue-router`，并直接模拟路由器和路由。 +这次为了测试该组件，我们将使用 Jest 模拟导入的资源 `vue-router`，并直接模拟路由器和路由。 ```js import { useRouter, useRoute } from 'vue-router' @@ -407,7 +407,7 @@ test('allows authenticated user to edit a post', () => { isAuthenticated: true }, global: { - stubs: ["router-link", "router-view"], // 为可能在模板中渲染的 router-link 和 router-view 提供 Stubs + stubs: ["router-link", "router-view"], // 为可能在模板中渲染的 router-link 和 router-view 提供测试替身 } }) @@ -434,7 +434,7 @@ test('redirect an unauthenticated user to 404', () => { isAuthenticated: false } global: { - stubs: ["router-link", "router-view"], // 为可能在模板中渲染的 router-link 和 router-view 提供 Stubs + stubs: ["router-link", "router-view"], // 为可能在模板中渲染的 router-link 和 router-view 提供测试替身 } }) @@ -445,9 +445,9 @@ test('redirect an unauthenticated user to 404', () => { }) ``` -## 使用真实路由器与组合式 API +## 在真实路由器中使用组合式 API -使用真实路由器与组合式 API 的方式与使用选项 API 时相同。请记住，和选项 API 一样，建议为每个测试实例化一个新的路由器对象，而不是直接从应用程序中导入路由器。 +使用真实路由器与组合式 API 的方式与使用选项式 API 时相同。请记住，和选项式 API 一样，我们建议为每个测试实例化一个新的路由器对象，而不是直接从应用程序中导入路由器。 ```js import { mount } from '@vue/test-utils' @@ -490,6 +490,6 @@ test('allows authenticated user to edit a post', async () => { - 你可以在测试中使用真实的路由器实例。 - 但是有一些注意事项：Vue Router 4 是异步的，我们需要在编写测试时考虑这一点。 -- 对于更复杂的应用程序，考虑模拟路由器依赖项，专注于测试底层逻辑。 -- 尽可能利用测试运行器的桩 (stub)/模拟功能。 +- 对于更复杂的应用程序，请考虑模拟路由器的依赖项，且专注于测试底层逻辑。 +- 尽可能利用测试运行器的测试替身来模拟功能。 - 使用 `global.mocks` 来模拟全局依赖项，例如 `this.$route` 和 `this.$router`。 From c177c379c49ac327f85feaf5d4dfa7d09d096586 Mon Sep 17 00:00:00 2001 From: Jinjiang Date: Tue, 25 Feb 2025 20:25:44 +0800 Subject: [PATCH 2/4] docs(zh): review teleport --- docs/zh/guide/advanced/teleport.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/docs/zh/guide/advanced/teleport.md b/docs/zh/guide/advanced/teleport.md index d492e8aad..1913c436b 100644 --- a/docs/zh/guide/advanced/teleport.md +++ b/docs/zh/guide/advanced/teleport.md @@ -1,16 +1,16 @@ # 测试 Teleport -Vue 3 引入了一个新的内置组件：``，它允许组件将其内容 “传送” 到其 `