单元测试语法小总结

311 阅读1分钟

我们使用的是 Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。

网址: vue-test-utils.vuejs.org/zh/

0.单独执行test : "test:a": "jest ./src/views/tests/tenant-user-config-enum.spec.js"

1.contains 里面一般可以查询标签和类名, toContain 一般查询文本 


test('render', () => {
    expect(wrapper.contains('.tenant-small-nodes-page')).toBe(true);
});
   


2.
it('has a back icon', () => {
    expect(wrapper.text()).toContain('返回租户列表');
});

3. .not 可以用于非判断条件 , async await 可以在测试中写异步, 一般点击事件,或执行method中的方法,  
wrapper.vm.a 可以获取vue中的data数据和method方法    

it('not show edit nodes in default,after click funtion ,show the edit nodes', async () => {
    expect(wrapper.text()).toContain('请先选择左侧小结');
    //执行方法
    await wrapper.vm.editNodeFun({});
    expect(wrapper.text()).not.toContain('请先选择左侧小结');
});

it('button click should increment the count text', async () => {
  expect(wrapper.text()).toContain('0')
  const button = wrapper.find('button')
  await button.trigger('click')
  expect(wrapper.text()).toContain('1')
})
4. toEqual 用户一些对象数组判断是否相等
 it('deleteEmpty function test ,one empty', () => {
    expect(wrapper.vm.deleteEmpty([{ text: '' }, { text: '23' }], "text")).toEqual([{ text: '23' }]);
});

5. 在顶部可以声明虚假的router 和route 在下面使用,这是虚假的,不是真实!!

image.png

it('back funtion is succuss,router push is success, page go to "/" path', async () => {
    //执行方法
    await wrapper.vm.goBackList({});
    expect(wrapper.vm.$router.length > 0).toBe(true);
    expect(wrapper.vm.$router[0].path === '/').toBe(true);
    console.log(wrapper.vm.$route.path, wrapper.vm.$router, wrapper.vm.$router[0].path, 22);
});