基于VUE的前端单元测试应用（Jest、Langchain）
为什么需要单元测试
对于一些长期多人维护的大项目，在没有单元测试的情况下，隔一段时间很可能由于疏忽重新踩坑
有了单元测试我们就可以为这些问题点编写对应的测试代码，每次提交代码前都执行一遍，可以极大的降低相同 bug 重复出现的概率。
将复杂的代码拆解成为更简单、更容易测试的片段，某种程度上编写单元测试的过程会潜移默化的提高我们代码的质量（TDD）。
如何写单元测试
单元测试一般包含以下几个部分：
被测试的对象是什么（组件、mixins、utils…）
要测试该对象的什么功能（props、method、emit、页面渲染…）
实际得到的结果
期望的结果
mock
具体到某个单元测试，往往包含以下几个步骤：
准备阶段：构造参数，创建 mock 等
执行阶段：用构造好的参数执行被测试代码
断言阶段：用实际得到的结果与期望的结果比较，以判断该测试是否正常
清理阶段：清理准备阶段对外部环境的影响，移除在准备阶段创建的实例等
针对大而复杂的项目时，单元测试应该围绕那些可能会出错的地方及边界情况。
前端单元测试工具
在前端领域，有多种单元测试工具可供选择。一些常见的单元测试工具包括：
断言(Assertions)：用于判断结果是否符合预期。有些框架需要单独的断言库。
异步测试：有些框架对异步测试支持良好。
Mock：用于特殊处理某些数据，比如隔离非必要第三方库/组件
代码覆盖率：计算语句/分支/函数/行覆盖率
考虑到上手难度以及功能全面性，考虑使用的测试工具为：JEST
JEST快速开始
1、安装：npm install --save-dev jest， 如果测试的为VUE框架，需要再借助vue test utils工具（https://v1.test-utils.vuejs.org/zh/）
如果使用vue-cli，选择 "Manually select features" 和 "Unit Testing"，以及 "Jest" 作为 test runner即可
2、一旦安装完成，cd 进入项目目录中并运行 npm run test:unit即可
3、编写测试
这里举个简单例子（PayState.vue）
<template><div class="result-type-wrapper"><Icon class="result-icon succ" v-if="state == 'success'"></Icon><p class="result-title">{{ title }}</p><p class="opera-tips">{{ tips }}</p><slot></slot></div></template><script>export default {props: ['title', 'tips', 'state']};</script>
在 tests/unit 中创建一个 payState.test.js。在其内容中，引入 PayState.vue，以及 shallowMount 方法，并添加测试的概要：
import payState from '../PayState.vue';import { shallowMount } from '@vue/test-utils';describe('payState.vue', () => {it('v-if 验证', () => {let wrapper = shallowMount(payState, { 挂载选项 })expect(wrapper.findComponent('.result-icon.succ').exists()).toBeFalsy();})})
describe 一般概述了测试会包含什么，可以理解成文件夹的概念
it （别名test）表示测试应该完成的主题中一段单独的职责。随着我们为组件添加更多特性，在测试中就会添加更多 it 块
expect表示作出断言，我们可以看到期望的和实际的结果，也能看到期望是在哪一行失败的。
关于断言中匹配器的使用，可以参考文章：JEST匹配器（https://jestjs.io/zh-Hans/docs/using-matchers）
而挂载选项的话，参考Vue test utils的官网文档：挂载选项（https://v1.test-utils.vuejs.org/zh/api/options.html#context）
Vue可测试的内容
这里列举一些在VUE中能测试到的内容，具体是否需要测试，可以按实际情况分析，如果只是获取数据，没有任何业务逻辑，可以忽略
Props
1）通过在加载一个组件时传递 propsData，就可以设置 props 以用于测试
const wrapper = shallowMount(CreditCard, {propsData: {showFooter: false}})
2）可测试的内容：值的边界情况，以及特殊字符的表现，非要求必传的时候值的表现情况
Computed 计算属性
1）可以使用 shallowMount 并断言渲染后的代码来测试计算属性
例如，假设你有一个计算属性 fullName，它由 firstName 和 lastName 计算而来，你可以编写测试来确保 fullName 在 firstName 和 lastName 改变时返回正确的值。
it('计算属性 fullName 正确计算', () => {const wrapper = shallowMount(MyComponent, {propsData: {firstName: 'John',lastName: 'Doe',},});expect(wrapper.vm.fullName).toBe('John Doe');wrapper.setData({ firstName: 'Jane' });expect(wrapper.vm.fullName).toBe('Jane Doe');});
2）可测试的内容：值的边界情况，以及特殊字符的表现
测试组件渲染输出
1) v-if/v-show 是否符合预期，常用到的断言对象分别是dom.exists() 及 dom.isVisible()
2) 类名和DOM属性测试，常用到的断言对象分别是dom.classes() 及 dom.attributes()
测试组件方法
1）模拟用户行为：通过findComponent或者findAllComponents来获取DOM或者自组件，并通过trigger触发注册的事件，从而断言结果是否符合预期
2）对于一些mixins引入的外部函数，如想判断是否被调用，可以通过mock的方式以及toBeCalled的匹配器来判断
it('emit功能验证', () => {wrapper.findComponent('.point-card-close').trigger('click');expect(outsideMock).toBeCalled();expect(outsideMock).toHaveBeenCalledTimes(1);})
3）emit的事件可以通过emitted方法来获取
expect(wrapper.emitted().foo).toBeTruthy()expect(wrapper.emitted().foo[0]).toEqual([123])
测试 vue-router
1）通过在shallowMount渲染组件的时候传入mock数据，来模拟$route、$router对象
const wrapper = shallowMount(Payment, {mocks: {: {query: {}},: {replace: jest.fn()}}})
测试mixin
在组件中或全局注册mixin、挂载组件、最后检查mixin是否产生了预期的行为
import MyComponent from '@/components/MyComponent';import MyMixin from '@/mixins/MyMixin';import { shallowMount } from '@vue/test-utils';it('测试 mixins 修改状态和数据', () => {const wrapper = shallowMount(MyComponent, {mixins: [MyMixin],});// 确保 mixin 修改了组件的数据expect(wrapper.vm.mixinData).toBe('Mixin Data');// 确保 mixin 修改了组件的状态expect(wrapper.vm.$store.state.mixinState).toBe(true);})})
测试VUEX
主要有两种方式：
单独测试store中的每一个部分：我们可以把store中的mutations、actions和getters单独划分，分别进行测试。（小而聚焦，但是需要模拟Vuex的某些功能）
组合测试store：我们不拆分store，而是把它当做一个整体，我们测试store实例，进而希望它能按期望输出（避免互相影响实例，使用vue test utils提供的localVue）
快照测试
简单的解释就是获取代码的快照，并将其与以前保存的快照进行比较，如果新的快照与前一个快照不匹配，测试会失败。
当一个快照测试用例失败时，它提示我们组件相较于上一次做了修改。如果是计划外的，测试会捕获异常并将它输出提示我们。如果是计划内的，那么我们就需要更新快照。
食用方法 ：expect(wrapper.element).toMatchSnapshot()
测试报告与覆盖率
覆盖率可以简单理解为已被测试代码，它可以从一定程度上衡量我们对代码测试的充分性。原则上我们追求的单元测试覆盖率目标是100%，但业务场景多的情况几乎是不可能。
因此我们可以只针对核心底层的模块书写单元测试，核心复杂功能尽量覆盖率做到最高，业务类的酌情处理。
四个概念：
语句覆盖率：是不是每个语句都执行了
分支覆盖率：是不是每个if代码块都执行了
函数覆盖率：是不是每个函数都调用了
行覆盖率：是不是每一行都执行了
也可以打开对应的报告查阅未覆盖到的模块内容，并进行对应的修改
「7x」表示在测试中这条语句执行了 7 次
「I」是测试用例 if 条件未进入，即没有 if 为真的测试用例
「E」是测试用例没有测试 if 条件为 false 时的情况
即测试用例中 if 条件一直都是 true，得写一个 if 条件为 false 的测试用例，即不走进 if 条件里面的代码，这个 E 才会消失
关于覆盖率的阈值，已经比对的文件，具体可以参考jest.config.js文件,这里设置为80
coverageThreshold: {global: {branches: 80,functions: 80,lines: 80,statements: 80}},
结合LangChain生成基础单测代码
不同于功能或算法库，编写Vue的单元测试用例时，常常会发现存在许多通用且重复的部分。因此，可以考虑借助AI的能力来辅助生成基本的Jest单元测试代码。
尽管生成的单元测试代码可以作为起点，帮助编写基本的测试用例，但由于代码中通常包含一些业务特定的逻辑，可能需要进行二次处理。因此，生成的测试代码仅供参考，需要根据具体情况进行调整和补充。
源码参考：https://code.37ops.com/zhouguilin/openai-code-generator/-/blob/ai-unit-test/src/unit-creator.js
这是生成的某个测试文件效果实例：
通过AI的协助，我们已经能够生成基本的测试用例代码，包括render、methods、computed、watch以及slot。这显著降低了我们编写重复代码的时间成本，然后把重点放在特殊业务逻辑的测试用例编写上。
import { shallowMount } from '@vue/test-utils';import CreditCard from '../CreditCard.vue';jest.mock('@utiles/officialStore', () => ({RES_HOST: 'mocked-res-host'}));jest.mock('@store/officialWebStore', () => ({GET_CARD_SCHEMES_ACTION: 'mocked-get-card-schemes-action',SET_CREDIT_CARD: 'mocked-set-credit-card'}));jest.mock('vuex', () => ({mapState: jest.fn()}));describe('CreditCard', () => {let wrapper;beforeEach(() => {wrapper = shallowMount(CreditCard, {propsData: {curPayType: {currency: 'USD'},curLocationVal: 'mocked-location',discountTransMount: 100,curCoins: {TRANS_AMOUNT: 50},isCoins: true},mocks: {$store: {state: {gameId: 'mocked-game-id'},commit: jest.fn(),dispatch: jest.fn()},window: {webstorev2DataLayer: {push: jest.fn()}}},slots: {default: '<div class="default-slot">Default Slot Content</div>',namedSlot: '<div class="named-slot">Named Slot Content</div>'},scopedSlots: {contextualSlot: '<div class="contextual-slot" v-bind="props">Contextual Slot Content</div>'}});});it('renders the component', () => {expect(wrapper.exists()).toBe(true);});it('renders the credit card container when curPayType is provided', () => {expect(wrapper.find('.credit-card-container').exists()).toBe(true);});it('does not render the credit card container when curPayType is not provided', () => {const wrapperWithoutCurPayType = shallowMount(CreditCard);expect(wrapperWithoutCurPayType.find('.credit-card-container').exists()).toBe(false);});it('renders the card item when creditCardList is provided', () => {expect(wrapper.findAll('.card-item').length).toBe(2);});it('does not render the card item when creditCardList is not provided', () => {const wrapperWithoutCreditCardList = shallowMount(CreditCard);expect(wrapperWithoutCreditCardList.findAll('.card-item').length).toBe(0);});it('selects the credit card when clicked', () => {const cardItem = wrapper.find('.card-item');cardItem.trigger('click');expect(wrapper.vm.curCreditCard).toBe('card1');});it('calls the getCardSchemes method when created', () => {expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith('mocked-get-card-schemes-action', {currency: 'USD',game_id: 'mocked-game-id',location: 'mocked-location',amount: 50});});it('calls the getCardSchemes method when discountTransMount is updated', () => {wrapper.setProps({ discountTransMount: 200 });expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith('mocked-get-card-schemes-action', {currency: 'USD',game_id: 'mocked-game-id',location: 'mocked-location',amount: 200});});it('calls the getCardSchemes method when curCoins is updated and isCoins is true', () => {wrapper.setProps({ curCoins: { TRANS_AMOUNT: 100 } });expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith('mocked-get-card-schemes-action', {currency: 'USD',game_id: 'mocked-game-id',location: 'mocked-location',amount: 100});});it('computes the creditCardList correctly', () => {wrapper.setData({creditCardList: ['card1', 'card2']});expect(wrapper.vm.creditCardList).toEqual(['card1', 'card2']);});it('computes the curCreditCard correctly', () => {wrapper.setData({curCreditCard: 'card1'});expect(wrapper.vm.curCreditCard).toBe('card1');});it('computes the letter correctly', () => {wrapper.setData({letter: {pleaseCard: 'Please select a card'}});expect(wrapper.vm.letter).toEqual({pleaseCard: 'Please select a card'});});it('watches the discountTransMount property and calls the getCardSchemes method when it changes', () => {wrapper.setProps({ discountTransMount: 200 });expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith('GET_CARD_SCHEMES_ACTION', {currency: 'USD',game_id: 'mocked-game-id',location: 'mocked-location',amount: 200});});it('watches the curCoins property and calls the getCardSchemes method when it changes and isCoins is true', () => {wrapper.setProps({ curCoins: { TRANS_AMOUNT: 100 } });expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith('GET_CARD_SCHEMES_ACTION', {currency: 'USD',game_id: 'mocked-game-id',location: 'mocked-location',amount: 100});});it('renders the default slot content', () => {expect(wrapper.find('.default-slot').exists()).toBe(true);expect(wrapper.find('.default-slot').text()).toBe('Default Slot Content');});it('renders the named slot content', () => {expect(wrapper.find('.named-slot').exists()).toBe(true);expect(wrapper.find('.named-slot').text()).toBe('Named Slot Content');});it('renders the contextual slot content with the correct props', () => {expect(wrapper.find('.contextual-slot').exists()).toBe(true);expect(wrapper.find('.contextual-slot').text()).toBe('Contextual Slot Content');expect(wrapper.find('.contextual-slot').attributes('cur-pay-type')).toBe('{"currency":"USD"}');expect(wrapper.find('.contextual-slot').attributes('cur-location-val')).toBe('mocked-location');expect(wrapper.find('.contextual-slot').attributes('discount-trans-mount')).toBe('100');expect(wrapper.find('.contextual-slot').attributes('cur-coins')).toBe('{"TRANS_AMOUNT":50}');expect(wrapper.find('.contextual-slot').attributes('is-coins')).toBe('true');});});
END
三七互娱技术团队
扫码关注 了解更多