如何给Vue3组件库加单元测试
2022-01-17 本文已影响0人
深度剖析JavaScript
Vue DevUI
的单元测试环境是基于Jest和Vue Test Utils的,所以它的步骤如下:
- 首先,安装jest
# 使用yarn安装
yarn add --dev jest
# 或使用 npm
npm install --save-dev jest
- 然后,
package.json
中增加脚本命令
{
"scripts": {
"test": "jest"
}
}
- 编写单元测试,步骤:
测试套
、单元测试
、测试断言
// Step 1: 定义一个测试套 Test Suite
describe('tree', () => {
// Step 2: 定义一个单元测试 Test
it('tree should render correctly', () => {
// Step 3: 期望(expect)tree组件的class里面包含(toContain)'devui-tree'
expect(wrapper.classes()).toContain('devui-tree')
// 同时期望(expect)tree组件的子元素数量为(toBe)6
expect(wrapper.element.childElementCount).toBe(6)
})
})
- 执行 test 命令
yarn test
or
npm run test
注意:以上步骤可能还会有问题,需要对应安装所缺插件