4.3.3 编写可被测试的组件
优质
小牛编辑
128浏览
2023-12-01
很多组件的渲染输出由它的 props 决定。事实上,如果一个组件的渲染输出完全取决于它的 props,那么它会让测试变得简单,就好像断言不同参数的纯函数的返回值。看下面这个例子:
<template> <p>{{ msg }}</p> </template> <script> export default { props: ['msg'] } </script>
你可以在不同的 props 中,通过propsData
选项断言它的渲染输出:
import Vue from 'vue' import MyComponent from './MyComponent.vue' // 挂载元素并返回已渲染的文本的工具函数 function getRenderedText (Component, propsData) { const Constructor = Vue.extend(Component) const vm = new Constructor({ propsData: propsData }).$mount() return vm.$el.textContent } describe('MyComponent', () => { it('renders correctly with different props', () => { expect(getRenderedText(MyComponent, { msg: 'Hello' })).toBe('Hello') expect(getRenderedText(MyComponent, { msg: 'Bye' })).toBe('Bye') }) })