Skip to content

Commit

Permalink
docs(zh): review extending-vtu (#2583)
Browse files Browse the repository at this point in the history
* docs(zh): review community-learning

* docs(zh): review extending-vtu/plugins
  • Loading branch information
Jinjiang authored Jan 7, 2025
1 parent fd31749 commit 1ca4225
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 25 deletions.
2 changes: 1 addition & 1 deletion docs/zh/guide/extending-vtu/community-learning.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/)。博客文章。
46 changes: 22 additions & 24 deletions docs/zh/guide/extending-vtu/plugins.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
# 插件

插件为 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 插件

### 使用插件

通过调用 `config.plugins.VueWrapper.install()` 方法来安装插件。这必须在调用 `mount` 之前完成。

`install()` 方法将接收一个 `WrapperAPI` 实例,该实例包含该实例的公共和私有属性
`install()` 方法将接收一个 `WrapperAPI` 实例及其公共和私有属性

```js
// setup.js file
Expand All @@ -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` 实例,并可以对其进行修改。

#### 基本插件

Expand All @@ -53,7 +53,7 @@ import { config } from '@vue/test-utils'

const myAliasPlugin = (wrapper) => {
return {
$el: wrapper.element // 简单别名
$el: wrapper.element // 简单的别名
}
}

Expand All @@ -62,9 +62,7 @@ const myAliasPlugin = (wrapper) => {
config.plugins.VueWrapper.install(myAliasPlugin)
```

在你的测试中,你将能够在 `mount` 之后使用你的插件。

// component.spec.js
在测试中,你可以在 `mount` 之后使用该插件。

```js
// component.spec.js
Expand All @@ -74,7 +72,7 @@ console.log(wrapper.$el.innerHTML) // 🔌 Plugin

#### 数据测试 ID 插件

下面的插件为 `VueWrapper` 实例添加了一个 `findByTestId` 方法。这鼓励使用依赖于 Vue 组件上的测试专用属性的选择器策略
下面的插件为 `VueWrapper` 实例添加了一个 `findByTestId` 方法。它鼓励你在 Vue 组件上选择测试转用的 attribute 作为你的选择器策略

用法:

Expand All @@ -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
```

插件的实现:
Expand All @@ -115,14 +113,14 @@ const DataTestIdPlugin = (wrapper) => {
config.plugins.VueWrapper.install(DataTestIdPlugin)
```

## Stubs 插件
## Stub 插件

`config.plugins.createStubs` 允许覆盖 VTU 提供的默认桩创建
`config.plugins.createStubs` 允许覆盖 VTU 默认创建并提供的测试替身

一些使用场景包括:

- 你想在桩中添加更多逻辑 (例如命名插槽)
- 你想为多个组件使用不同的桩 (例如从库中桩化组件)
* 你想在测试替身中添加更多逻辑 (例如具名插槽)
* 你想为多个组件使用不同的测试替身 (例如一个库中的测试替身组件)

### 用法

Expand All @@ -134,7 +132,7 @@ config.plugins.createStubs = ({ name, component }) => {
}
```

每当 VTU 生成一个桩时,这个函数都会被调用,无论是通过以下方式
不论通过以下哪种方式,每当 VTU 生成一个测试替身时,这个函数都会被调用:

```typescript
const wrapper = mount(Component, {
Expand All @@ -146,13 +144,13 @@ const wrapper = mount(Component, {
})
```

还是

```typescript
const wrapper = shallowMount(Component)
```

但当你显式设置桩时,它将不会被调用:
但当你显式设置测试替身时,它将不会被调用:

```typescript
const wrapper = mount(Component, {
Expand All @@ -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'
Expand All @@ -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) 中推广。

0 comments on commit 1ca4225

Please sign in to comment.