@vue/cli-plugin-unit-jest
unit-jest plugin for vue-cli
vue add @vue/unit-jest
vue-cli-service test:unit [options] <regexForTestFiles>
支持所有的Jest 命令行参数
Jest 的配置项在项目根目录下的jest.config.js文件中，或package.json的jest字段中。
依赖@vue/test-utils
Vue Test Utils
Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。
1. API
mount(component, options)创建一个包含被挂载和渲染的Vue组件的Wrapper
1. Wrapper
属性：
vm只读，该Vue实例element包裹器的根DOM节点options.attachedToDocument如果组件在渲染之后被添加到了文档上则为trueoptions.sync如果挂载选项里的 sync 不是 false 则为真
方法：
| 方法 | 描述 | 参数 | 返回值 |
|---|---|---|---|
attributes |
返回wrapper DOM 节点的特性对象 |
{string} key 可选 | {[attribute: string]: any} | string |
classes |
wrapper DOM 节点的class。返回 class 名称的数组。或在提供 class 名的时候返回一个布尔值。 |
{string} className 可选 |
Array<{string}> | boolean |
contains |
判断Wrapper是否包含了一个匹配选择器的元素或组件 |
boolean |
|
destroy |
销毁Vue组件实例 | ||
emitted |
一个包含Wrapper vm触发过的自定义事件对象，包含触发的事件名称，及每次触发时的参数。 |
{ [name: string]: Array<Array<any>> } |
|
emittedByOrder |
一个按触发顺序排列的Wrapper vm触发过的自定义事件的数组 |
Array<{ name: string, args: Array<any> }> |
|
exists |
断言 Wrapper 或 WrapperArray 是否存在。 |
||
find |
匹配选择器的第一个 DOM 节点或 Vue 组件的 Wrapper。 |
||
findAll |
WrapperArray |
||
html |
返回WrapperDOM节点的HTML字符串 |
||
is |
断言WrapperDOM节点或vm与选择器匹配 |
boolean |
|
isEmpty |
断言Wrapper不包含子节点 |
boolean |
|
isVisible |
断言Wrapper是否可见。如果有一个祖先元素拥有 display: none 或 visibility: hidden 样式则返回 false。这可以用于断言一个组件是否被 v-show 所隐藏。 |
||
isVueInstance |
断言Wrapper是Vue实例 |
||
name |
如果 Wrapper 包含一个 Vue 实例则返回组件名，否则返回 Wrapper DOM 节点的标签名。 | ||
props |
返回 Wrapper vm 的 props 对象。如果提供了 key，则返回这个 key 对应的值。 | {[prop: string]: any} | any |
|
setProps |
设置Wrapper``vm的props并强制更新 |
||
setData |
设置Wrapper vm的属性。setData通过递归调用Vue.set生效 |
||
setMethods |
设置Wrapper``vm的方法并强制更新 |
||
setChecked |
设置 checkbox 或 radio 类 <input> 元素的 checked 值并更新 v-model 绑定的数据。 |
{Boolean} checked (默认值：true) |
|
setSelected |
选择一个option元素并更新v-model绑定的数据 |
||
setValue |
设置一个文本控件或select元素的值并更新v-model绑定的数据 |
||
text |
返回的Wrapper的文本内容 |
||
trigger |
在该 Wrapper DOM 节点上触发一个事件。 |
{string} eventType 必填; {Object} options 可选 |
2. WrapperArray
3. 挂载选项
mountshallowMount只挂载一个组件而不会渲染其子组件
2. 常用技巧
我们推荐测试撰写为断言你的组件的公共接口，并在一个黑盒内部处理它。一个简单的测试用例将会断言一些输入 (用户的交互或 prop 的改变) 提供给某组件之后是否导致预期结果 (渲染结果或触发自定义事件)。这样的好处在于，即便该组件的内部实现已经随时间发生了改变，只要你的组件的公共接口始终保持一致，测试就可以通过。
下图是
