[译] Vue 3 Composition API 之单元测试

原文： itnext.io/testing-the…

Vue 3 的 Composition API 的单元测试看起来会是什么样子呢？

为了让开发者们更早的尝鲜 Composition API，Vue 团队释出了一个让咱们能在 Vue 2 中使用的插件，能够在 github.com/vuejs/compo… 找到它。

本文速览了新的 Composition API 如何玩转官方的 Vue 组件单元测试库 vue-test-utils。剧透：用起来是同样同样的。

测试一个用 Composition API 搭建的组件应该和测试一个标准组件没有分别；由于咱们不测试其实现，而只是测试输出（组件 是什么，而非 如何为之）。这篇文章将用一个简单的例子，展现使用了 Composition API 的 Vue 2 组件，其测试策略和处理其余组件时的何其相同。

用于测试的目标组件

如下代码或多或少地能够算做 Composition API 界的 “Hello, World” 了。若是你有什么不懂的，读一下 vue-composition-api-rfc.netlify.com 或这篇文章 medium.com/js-dojo/com… ，再不行就谷bai歌du一下；总有不少可用的 Composition API 相关资源的。

<template>
  <div>
    <div class="message">{{ uppercasedMessage }}</div>
    <div class="count">
      Count: {{ state.count }}
    </div>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

import { 
  reactive,
  computed
} from '@vue/composition-api'

export default {
  name: 'CompositionApi',

  props: {
    message: {
      type: String
    }
  },

  setup(props) {
    const state = reactive({
      count: 0
    })

    const increment = () => {
      state.count += 1
    }

    return {
      state,
      increment,
      uppercasedMessage: computed(() => props.message.toUpperCase())
    }
  }
}
</script>
复制代码

此处咱们将须要测试两件事情：

1. 点击 increment 按钮会将 state.count 加 1 吗？
2. props 中传入的 message 是否被正确地渲染了（转为大写）？

测试 Props 中传入的 Message

测试 message 被稳当地渲染是小事一桩。咱们只消使用 propsData 设置属性值便可，正如文档 gist.github.com/components-… 中所描述的。

import { shallowMount } from "@vue/test-utils"

import CompositionApi from "@/components/CompositionApi.vue"

describe("CompositionApi", () => {
  it("renders a message", () => {
    const wrapper = shallowMount(CompositionApi, {
      propsData: {
        message: "Testing the composition API"
      }
    })

    expect(wrapper.find(".message").text()).toBe("TESTING THE COMPOSITION API")
  })
})
复制代码

果真很是简单 -- 尽管咱们没用组件方式，仍可使用一样的 API 和一样的测试策略。你应该可以整个改变实现，而不用碰测试代码才对。记住要基于给定的输入（属性、触发的事件）测试输出（一般是渲染过的 HTML），而非实现。

测试按钮单击

写一个测试去确保单击按钮后增长 state.count 一样的简单。注意该测试被标记为 async；关于为什么须要这样作能够参阅文章 《模拟用户输入》（ gist.github.com/lmiller1990… ）。

import { shallowMount } from "@vue/test-utils"

import CompositionApi from "@/components/CompositionApi.vue"

describe("CompositionApi", () => {
  it("increments a count when button is clicked", async () => {
    const wrapper = shallowMount(CompositionApi, {
      propsData: { message: '' }
    })

    wrapper.find('button').trigger('click')
    await wrapper.vm.$nextTick()

    expect(wrapper.find(".count").text()).toBe("Count: 1")
  })
})
复制代码

不厌其烦地再解说一次 -- 咱们 trigger 了单击事件，并断言渲染过的 count 增长了。

总结

本文演示了如何测试一个使用了 Composition API 的组件和测试一个传统的 options API 组件时，不管是想法仍是概念，都是何其相同。要学习的要点在于，当编写测试时，基于输入和输出作出断言。vue-test-utils 并不关心你如何构成组件；全部既有的方法和 APIs 都能应用于 Composition API。这是个好事！

应该在无需修改单元测试的前提下，使用 Composition API 重构任何传统的 Vue 组件。若是你发现本身在重构时须要更改测试，极可能就是以前测试了 具体实现，而非输出。

虽然是个动人的新特性，但 Composition API 彻底是锦上添花的，因此不须要马上去用它；可是不管你如何选择，记住一个好的单元测试只断言组件的最终状态，而不用考虑其实现细节。

--End--

搜索 fewelife 关注公众号

转载请注明出处