• 开始时间：2020-04-19
  • 目标主要版本：2.x
  • 引用 issue：
  • 实现的 PR：

摘要

VueTestUtils 2.x 以 Vue3 为目标，将引入一些新的方法并删除一些不太常用的方法：

  • 破坏性变更：sync 模式被移除。所有 wrapper 函数都从 nextTick() 返回一个 Promise。
  • 破坏性变更：find 现在被拆分为 find 和 findComponent。
  • 破坏性变更：删除了一些包装器（Wrapper）的属性和方法，因为它们会诱发不好的测试习惯或已经过时。
  • 破坏性变更：shallowMount 存根为默认插槽。
  • 破坏性变更：setProps 只对挂载的组件起作用。

注意：VeuTestUtils 1.x 的 API 将保持不变，并将支持 Vue 2.x。

基本范例

N/A

动机

  • 支持 Vue 3 的组件 API。
  • 提供更小、更容易理解的 API。
  • 允许通过插件系统添加自定义功能。
  • 删除那些臃肿或导致不良测试习惯的方法。
  • 正常的改进 VTU 文档和指南。

具体设计

  • createLocalVue 被移除。Vue 现在暴露了 createApp，它创建了一个孤立的应用实例。VTU 在幕后做到这一点。
  • 完全的 async，每个诱发突变的方法都从 nextTick() 返回一个 Promise。像 setValue 和 trigger 这样的方法可以被等待，确保 DOM 在每次断言之前被重新渲染。
  • 完全用 TypeScript 重写，在编写测试时提供了更多的类型提示。
  • shallowMount 将存根存根组件的默认插槽。将会有一个选择性的配置，以类似于 VTU 测试版的方式为存根的组件启用渲染插槽。有一个限制，在这种情况下，作用域插槽将不能提供数据。
  • 简单的插件系统，允许你用自己的方法扩展 VTU。参考插件。

API 改变

我们将只列出变化和废弃的部分。请查看临时文档以了解完整的 API 列表。

mountOptions

props

Link - 从 propsData 重命名，以匹配组件的 props 字段。

global

Link - global 命名空间用于向 createApp 实例传递配置。像全局组件、指令等等。

这些设置也可以通过导出的 config 对象进行全局设置 —— config.global.mocks.$t = jest.fn()

  • global.components - 注册全局组件
  • global.directives - 注册一个全局指令
  • global.mixins - 注册全局 mixin
  • global.plugins - 安装一个插件
  • global.stubs - 见下文
  • global.mocks - 见下文
  • global.provide - 见下文

stubs

Link - 移至 global.stubs

  • 新功能：Stub 将不再渲染一个组件插槽。这可以通过一个全局的标志 config.renderStubSlots = true 启用。

mocks

Link - 移至 global.mocks

provide

Link - 移至 global.provide

方法

classes

Link

  • 新功能：为多个根节点抛出错误

unmount

Link

  • 新功能：替换 destroy 以匹配 Vue3 API

find

Link

  • 破坏性变更：仅返回 DOMWrapper。见 findComponent
  • 破坏性变更：仅接受 query 选择器。
  • 新功能：现在可以返回实例根元素，或根的片段。

findAll

Link

  • 破坏性变更：仅返回 DOMWrapper 数组
  • 破坏性变更：不在返回 WrapperArray
  • 破坏性变更：仅接受 query 选择器。

findComponent

Link
findComponent 可以搜索组件实例，嵌套在你的组件树中的任何级别。这个方法对于边缘下的断言是最有用的，这些断言不会直接反映在 DOM 中，或者在使用 shallowMount 和断言 props 的存根上。

大多数情况下，用户会使用 find 来断言 DOM 属性和内容。在真正需要 Vue 组件实例的情况下，使用 findComponent。

  • 新功能：通过 ref、name、query 或组件定义查找一个 Vue 组件实例。返回 VueWrapper。
  • 新功能：仅适用于 VueWrapper —— 不能通过链式查找。

findAllComponents

Link

  • 新功能：找到所有符合 name、query 或组件自定义的 Vue 组件。返回 VueWrapper 的组件。
  • 新功能：仅适用于 VueWrapper。

setProps

Link

  • 破坏性变更：只对已挂载的组件起作用
  • 新功能：返回 nextTick

setValue

Link

  • 破坏性变更：只在 DOMWrapper 上工作（目前）。
  • 新功能：统一 setChecked 和 setSelected。
  • 新功能：返回 nextTick。

插件系统

目前正在讨论一个简单的插件系统，并在此进行原型设计 —— POC：VTU 插件界面。

这应该允许用户为 VueWrapper 和 DOMWrapper 类添加额外的方法，让他们在设置测试套件时有更多自由。

  1. const plugin = (wrapper) => {
  2.   return {
  3.     width: 200,
  4.     findByTestId: (query) => wrapper.find(`[data-testid=${query}]`)
  5.   }
  6. }
  8. config.plugins.VueWrapper.install(plugin)
  10. // later
  11. expect(mount(Component).findByTestId('foo').exists()).toBe(true)

废弃

方法

emittedByOrder

Link - 很少使用，用 emmited 替代。

  1. expect(wrapper.emitted('change')[0]).toEqual(['param1', 'param2'])

is

Link - 使用 element.tagName 或 classes() 方法。以后可以作为插件方法添加。

  1. expect(wrapper.element.tagName).toEqual('div')
  2. expect(wrapper.classes()).toContain('Foo')

isEmpty

Link - 在元素上使用自定义匹配器，如 jest-dom#tobeempty。

  1. expect(wrapper.element).toBeEmpty()

isVisible

Link - 使用自定义匹配器，如 jest-dom#tobevisible

  1. expect(wrapper.element).toBeVisible()

isVueInstance

Link - 不再需要，find 总是返回一个 DOMWrapper，findComponent 返回一个 VueWrapper。如果失败，两者都会返回 ErrorWrapper。

setMethods

Link - 反模式。Vue 不支持任意替换方法，VTU 也不应该。如果你需要将一个动作 stub，那就把最困难的部分提取出来。然后也可以对它们进行单元测试。

  1. // Component.vue
  2. import { asyncAction } from 'actions'
  3. const Component = {
  4.     ...,
  5.     methods: {
  6.         async someAsyncMethod() {
  7.             this.result = await asyncAction()
  8.         }
  9.     }    
  10. }
  12. // spec.js
  13. import { asyncAction } from 'actions'
  14. jest.mock('actions')
  15. asyncAction.mockResolvedValue({ foo: 'bar' })
  17. // rest of your test


setChecked and setSelected

与 setValue 合并

destroy

现在命名为 unmount，以配合 Vue3 的 API。

name

Link - 从 core 中删除. 可以作为扩展插件的一部分加入。

Classes and properties

  • WrapperArray - Link - find 和 findComponent 将只是分别返回 VueWrapper 或 DOMWrapper 的数组。
  • config.methods - Link - 将不再能够替换方法。
  • config.silent - Link - 不需要
  • Wrapper.options - Link - 不需要

尚未实现

  • Wrapper.selector Link
  • Wrapper.contains - Link
  • shallowMount - Link - Stubs work, so its halfway there.
  • render - Link
  • renderToString - Link
  • createWrapper - Link
  • enableAutoDestroy - Link
  • scopedSlots - ScopedSlots are not ready yet. They will most probably be merged with normal ones, and will be a function with data, similar to VTU Beta.

缺点

  • 人们不得不把 find 分成 findComponent 和 find。我们希望这将使测试更加容易阅读和理解。
  • 快照不得不被更新。
  • 一些废弃的方法和功能很可能需要通过一个额外的插件来安装。

备选方案

N/A

采纳策略

  • 从头开始重写文档。
  • 在可能的情况下进行代码修改（大多数情况下是 find -> findComponent, destroy -> unmount）。
  • 在 v1 发版前，在测试版本中添加弃用警告。
  • 为 Vuex、Router 等流行工具增加专门的指南，说明如何编写更好、更可维护的测试。
  • 与流行的 Vue 生态系统库和框架合作，如 Quasar、Nuxt 和 Vuetify，以更好的了解用户需求。
  • 废弃的构建与警告。

没有解决的问题

  • Stubs 仍在开发中。它在 VTU 测试版本中有很多问题，我们希望这次能把它做对。可能会完全为它发布一个新的 RFC。