美文网首页
如何给Vue3组件库加单元测试

如何给Vue3组件库加单元测试

作者: 深度剖析JavaScript | 来源:发表于2022-01-17 07:42 被阅读0次

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

注意:以上步骤可能还会有问题,需要对应安装所缺插件

相关文章

网友评论

      本文标题:如何给Vue3组件库加单元测试

      本文链接:https://www.haomeiwen.com/subject/zflqhrtx.html