指南
基础概要
- 安装
- 介绍
- Vue 实例
- 模板语法
- computed 属性和 watcher
- class 和 style 绑定
- 根据条件进行渲染
- 列表渲染
- 事件处理
- 表单 input 绑定
- 组件基础
过渡 & 动画
- 进入、离开和列表的过渡
深入组件
- 组件注册
- props
- 自定义事件
- slot
- 动态组件和异步组件
- Handling Edge Cases
- 状态间的过渡
可重用 & 合成
- mixin
- 自定义指令
- render 函数 & jsx
- 插件
- 过滤器
工具
- 生产环境部署
- 单文件组件
- 单元测试
- TypeScript 支持
扩展升级
- 路由
- 状态管理
- 服务端渲染
内部原理
- 深入响应式原理
升级迁移
- 从 Vue 1.x 迁移
- 从 Vue Router 0.7.x 迁移
- 从 Vuex 0.6.x 迁移到 1.0
其他更多
- 对比其他框架
- 加入 Vue.js 社区
- 认识团队
单元测试
配置和工具
任何兼容基于模块的构建系统都可以正常使用,但如果你需要一个具体的建议,可以使用 Karma 进行自动化测试。它有很多社区版的插件,包括对 webpack 和 Browserify 的支持。更多详细的安装步骤,请参考各项目的安装文档。通过这些 Karma 配置的例子可以快速帮助你上手(webpack 和 Browserify 的配置)。
简单的断言
你不需要在组件中做任何特殊的事情来使它们成为可测试的。只需要导出原始选项:
<template> |
然后,将组件选项与 Vue 一起导入,并且可以进行许多常见的断言:
// 导入 Vue.js 和组件,进行测试 |
编写可被测试的组件
组件的渲染输出,主要由它们收到的 props 决定。如果一个组件的渲染输出完全依赖于它的 props,那么测试会变得很直观,类似于向一个纯函数传参,断言其返回值。举一个简单的例子:
<template> |
你可以在不同的 props 中,通过 propsData
选项断言它的渲染输出:
import Vue from 'vue' |
断言异步更新
由于 Vue 进行 异步更新DOM 的情况,一些依赖DOM更新结果的断言必须在 Vue.nextTick
回调中进行:
// 在状态更新后检查生成的 HTML |
我们计划做一个通用的测试工具集,让不同策略的渲染输出(例如忽略子组件的基本渲染)和断言变得更简单。
关于 Vue 单元测试的更多深入信息,请查看 vue-test-utils 和我们的 Cookbook 中 单元测试 vue 组件 部分。
← 单文件组件
TypeScript 支持 →
发现错误?想参与编辑?
在 GitHub 上编辑此页!