[已解决]vue jest单元测试中如何测试组件的css属性变化

Question

3. 如何获取一个组件的具体CSS样式值,以及如何测试prop是否验证失败(20200108)

业务背景

• 写了一个button组件,有一个props叫type,可以传入primary,info等值,传入primary后,会给组件添加一个类名叫uv-btn_primary,它对应的CSS样式有一个color: blue;就想测试一下,传入这个值后,颜色是否是blue.但是在单元测试里面根本无法获取到元素对应的样式
• 另外,对type这个prop也添加了validate,只能够传入primary,info等指定值,就是想要测试一下,如果传入other,是否返回了一个异常,可实测下来,setProps方法始终也是返回的undefined

项目地址

• https://github.com/ranwawa/un...

相关代码

// button.vue组件部分代码

type: {
  type: String,
  default: 'default',
  validator(value) {
    return [
      'default', 'primary', 'info', 'warning', 'danger',
    ].includes(value);
  },
},

// 单元测试代码

describe('prop type测试', function () {
  const wrapper = mount(Button, {
    propsData: {
      type: 'primary',
    },
  });
  it('传递type时,类名要跟着变化', () => {
    expect(wrapper.classes()).toContain('uv-btn_primary');
  });
  // 这里会报错,因为color始终返回的是undefined
  it('传递type时,颜色要跟着变化', () => {
    expect(wrapper.element.style.color).toBe('#fff');
  });
  // 这晨也会报错,国为方法始终返回的是一个undefined而不是异常
  it('type传入other时,要报错', () => {
    expect(wrapper.setProps({ type: 'other'})).toThrowError();
  });
});

Answer 1

问题解决

• vue test官方文档有说明,无法测试css样式,只能测试内联样式

  • 参考: https://vue-test-utils.vuejs....

• 不需要测试props的validate方法

  • 这个是属于vue的功能,不在我们的单元测试范畴
  • 单元测试的范围一定只是测试自己的单个业务功能