使⽤Jest对Vue进⾏⾃动化测试
在上⼀篇⽂章中，讲解了 Jest 的⼀些基本⽤法，理所当然的，我们需要应⽤到实际项⽬中，这⾥以 Vue 举例，介绍⼀些 Jest 在 Vue 开发中的基本⽤法。
TDD vs BDD
在开始之前，我们需要先了解两种编写测试⽤例的⽅式，以便在实际开发中选取合适的⽅式。
Test Driven Development (TDD) 测试驱动开发
TDD 的原理就是在编写代码之前先编写测试⽤例，由测试来决定我们的代码，⽽且 TDD 更多的需要编写独⽴的测试⽤例，⽐如只测试⼀个组件的某个功能点，某个⼯具函数等。它是⽩盒测试。
开发流程⼤致是：编写测试⽤例、运⾏测试、编写代码使测试通过、优化代码。
TDD 的优势：从长期来看，可以有效减少回归测试的 Bug；因为先编写测试，所以可能出现的问题都被提前发现了；测试覆盖率⾼，因为后编写代码，因此测试⽤例基本都能照顾到；保证代码质量。
js获取json的key和valueTDD 的劣势：因为侧重点在于代码，更多是保证某个测试单元没问题，因此⽆法保证业务流程没有问题；
⽽且需求经常变更，在修改某个功能点之前要先修改测试⽤例，因此在复杂的项⽬中⼯作量很⼤；测试代码和实际代码可能会出现耦合，经常需要修改。
BDD (Behavior Driven Development) ⾏为驱动开发
BDD 是从产品⾓度出发，它⿎励开发⼈员和⾮开发⼈员之间的协作，是⼀种⿊盒测试。
开发流程⼤致是：获悉需求并编写代码，然后再从⽤户⾓度编写集成测试。
BDD 的优势：它的测试重点更多是站在项⽬⾓度，在 UI 和 DOM 的⾓度进⾏测试，直接地测试业务流程是否没问题，测试代码和实际代码解耦。
BDD 的劣势：因为是集成测试，因此不是那么关注每个函数功能，测试覆盖率⽐较低，没有 TDD 那么严格的保证代码质量。
Vue 中配置 Jest
在这⾥，直接借助了 Vue CLI ⼯具来初始化项⽬，在初始化时会询问是否使⽤单元测试，我们只需要按照步骤选择，并选择 Jest 即可。
init.png
通过这种⽅式 Vue 会内置 Vue Test Utils 帮助我们进⾏测试

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。