diff --git a/docs/zh/guide/extending-vtu/community-learning.md b/docs/zh/guide/extending-vtu/community-learning.md index 7c093159b..b9659722e 100644 --- a/docs/zh/guide/extending-vtu/community-learning.md +++ b/docs/zh/guide/extending-vtu/community-learning.md @@ -2,7 +2,7 @@ - [Vue 3 Testing Handbook](https://lmiller1990.github.io/vue-testing-handbook/v3/)。在线指南。 - [Become a Ninja with Vue 3](https://books.ninja-squad.com/vue)。电子书和在线课程。 -- [Vue.js 3:The Composition API](https://vuejs-course.com/composition-api)。在线课程 (包括测试模块)。 +- [Vue.js 3:The Composition API](https://vuejs-course.com/composition-api)。在线课程 (包括一个测试模块)。 - [Testing Vue 3 apps with Vue Test Utils](https://www.youtube.com/playlist?list=PLC2LZCNWKL9ahK1IoODqYxKu5aA9T5IOA)。视频播放列表。 - [Testing Vue.js Components](https://vueschool.io/courses/learn-how-to-test-vuejs-components?friend=vth)。在线课程。 - [Front-end Testing and a tale of three users](https://afontcu.dev/frontend-testing-code-consumers/)。博客文章。 diff --git a/docs/zh/guide/extending-vtu/plugins.md b/docs/zh/guide/extending-vtu/plugins.md index dda7e2bca..31d602b51 100644 --- a/docs/zh/guide/extending-vtu/plugins.md +++ b/docs/zh/guide/extending-vtu/plugins.md @@ -1,12 +1,12 @@ # 插件 -插件为 Vue Test Utils 的 API 添加了全局功能。这是扩展 Vue Test Utils API 的官方方式,可以添加自定义逻辑、方法或功能。 +插件为 Vue Test Utils 的 API 添加全局功能。这是为 Vue Test Utils 的 API 扩展自定义逻辑、方法或功能的官方方式。 插件的使用场景: 1. 为现有的公共方法创建别名 -2. 将匹配器附加到 Wrapper 实例 -3. 将功能附加到 Wrapper +2. 为 Wrapper 实例添加匹配器 +3. 为 Wrapper 添加功能 ## Wrapper 插件 @@ -14,7 +14,7 @@ 通过调用 `config.plugins.VueWrapper.install()` 方法来安装插件。这必须在调用 `mount` 之前完成。 -`install()` 方法将接收一个 `WrapperAPI` 实例,该实例包含该实例的公共和私有属性。 +该 `install()` 方法将接收一个 `WrapperAPI` 实例及其公共和私有属性。 ```js // setup.js file @@ -33,15 +33,15 @@ config.plugins.VueWrapper.install(MyPlugin) config.plugins.VueWrapper.install(MyPlugin, { someOption: true }) ``` -你的插件应该只安装一次。如果你使用 Jest,这应该在你的 Jest 配置的 `setupFiles` 或 `setupFilesAfterEnv` 文件中。 +你的插件应该只安装一次。如果你使用 Jest,它应该在你的 Jest 配置的 `setupFiles` 或 `setupFilesAfterEnv` 文件中。 -某些插件在导入时会自动调用 `config.plugins.VueWrapper.install()`。如果它们同时扩展多个接口,这是常见的情况。请遵循你正在安装的插件的说明。 +某些插件会在导入时自动调用 `config.plugins.VueWrapper.install()`。如果它们同时扩展多个接口,这是常见的情况。请遵循你正在安装的插件的说明。 -查看 [Vue Community Guide](https://vue-community.org/guide/ecosystem/testing.html) 或 [awesome-vue](https://github.com/vuejs/awesome-vue#test) 获取社区贡献的插件和库的集合。 +查阅 [Vue Community Guide](https://vue-community.org/guide/ecosystem/testing.html) 或 [awesome-vue](https://github.com/vuejs/awesome-vue#test) 获取社区贡献的插件和库。 ### 编写插件 -Vue Test Utils 插件只是一个函数,该函数接收挂载的 `VueWrapper` 或 `DOMWrapper` 实例,并可以对其进行修改。 +Vue Test Utils 插件只是一个单纯的函数,该函数接收挂载的 `VueWrapper` 或 `DOMWrapper` 实例,并可以对其进行修改。 #### 基本插件 @@ -53,7 +53,7 @@ import { config } from '@vue/test-utils' const myAliasPlugin = (wrapper) => { return { - $el: wrapper.element // 简单别名 + $el: wrapper.element // 简单的别名 } } @@ -62,9 +62,7 @@ const myAliasPlugin = (wrapper) => { config.plugins.VueWrapper.install(myAliasPlugin) ``` -在你的测试中,你将能够在 `mount` 之后使用你的插件。 - -// component.spec.js +在测试中,你可以在 `mount` 之后使用该插件。 ```js // component.spec.js @@ -74,7 +72,7 @@ console.log(wrapper.$el.innerHTML) // 🔌 Plugin #### 数据测试 ID 插件 -下面的插件为 `VueWrapper` 实例添加了一个 `findByTestId` 方法。这鼓励使用依赖于 Vue 组件上的测试专用属性的选择器策略。 +下面的插件为 `VueWrapper` 实例添加了一个 `findByTestId` 方法。它鼓励你在 Vue 组件上选择测试转用的 attribute 作为你的选择器策略。 用法: @@ -92,7 +90,7 @@ console.log(wrapper.$el.innerHTML) // 🔌 Plugin ```js const wrapper = mount(MyComponent) -wrapper.findByTestId('name-input') // returns a VueWrapper or DOMWrapper +wrapper.findByTestId('name-input') // 返回一个 VueWrapper 或 DOMWrapper ``` 插件的实现: @@ -115,14 +113,14 @@ const DataTestIdPlugin = (wrapper) => { config.plugins.VueWrapper.install(DataTestIdPlugin) ``` -## Stubs 插件 +## Stub 插件 -`config.plugins.createStubs` 允许覆盖 VTU 提供的默认桩创建。 +`config.plugins.createStubs` 允许覆盖 VTU 默认创建并提供的测试替身。 一些使用场景包括: -- 你想在桩中添加更多逻辑 (例如命名插槽) -- 你想为多个组件使用不同的桩 (例如从库中桩化组件) +* 你想在测试替身中添加更多逻辑 (例如具名插槽) +* 你想为多个组件使用不同的测试替身 (例如一个库中的测试替身组件) ### 用法 @@ -134,7 +132,7 @@ config.plugins.createStubs = ({ name, component }) => { } ``` -每当 VTU 生成一个桩时,这个函数都会被调用,无论是通过以下方式: +不论通过以下哪种方式,每当 VTU 生成一个测试替身时,这个函数都会被调用: ```typescript const wrapper = mount(Component, { @@ -146,13 +144,13 @@ const wrapper = mount(Component, { }) ``` -还是 +或 ```typescript const wrapper = shallowMount(Component) ``` -但当你显式设置桩时,它将不会被调用: +但当你显式设置测试替身时,它将不会被调用: ```typescript const wrapper = mount(Component, { @@ -164,9 +162,9 @@ const wrapper = mount(Component, { }) ``` -## 使用 TypeScript 的插件 +## 配合 TypeScript 使用插件 -要使用自定义的 Wrapper 插件与 [TypeScript](https://www.typescriptlang.org/) 一起使用,你必须声明你的自定义 wrapper 函数。因此,添加一个名为 `vue-test-utils.d.ts` 的文件,内容如下: +要结合 [TypeScript](https://www.typescriptlang.org/) 使用自定义的包装器插件,你必须声明你的自定义包装器函数。即基于几下内容添加一个名为 `vue-test-utils.d.ts` 的文件: ```typescript import { DOMWrapper } from '@vue/test-utils' @@ -180,4 +178,4 @@ declare module '@vue/test-utils' { ## 推广你的插件 -如果你缺少某些功能,可以考虑编写插件来扩展 Vue Test Utils,并提交以在 [Vue Community Guide](https://vue-community.org/guide/ecosystem/testing.html) 或 [awesome-vue](https://github.com/vuejs/awesome-vue#test) 中推广。 +如果你需要某些功能,可以考虑编写插件来扩展 Vue Test Utils,并提交以在 [Vue Community Guide](https://vue-community.org/guide/ecosystem/testing.html) 或 [awesome-vue](https://github.com/vuejs/awesome-vue#test) 中推广。