Vue中使用shallowMount时如何结合html()与toContain()测试含子组件的父组件

问题原因 #

shallowMount是Vue测试的浅渲染方式，添加子组件后，子组件不会被完整渲染，而是以**组件占位符（stub）**的形式出现在父组件的DOM中（比如<child-component-stub>），导致你原来断言的空div字符串与实际渲染结果不符。

解决方案 #

推荐方案：使用细粒度断言（更稳定） #

不要直接匹配整个HTML字符串，而是拆分验证父组件的关键属性，这样测试不受子组件stub的影响，也更健壮：

describe('ParentComponent.vue', () => {
  it('renders a ParentComponent', () => {
    const wrapper = shallowMount(ParentComponent, {
      propsData: {
        propOne: 'someUrl',
        propTwo: 'someText'
      }
    });
    const parentDiv = wrapper.find('.some-class');
    
    // 验证class属性
    expect(parentDiv.classes()).toContain('some-class');
    // 验证alt属性值
    expect(parentDiv.attributes('alt')).toBe('someText');
    // 验证style样式的关键部分
    expect(parentDiv.attributes('style')).toContain('width: 2rem');
    expect(parentDiv.attributes('style')).toContain('height: 2rem');
    expect(parentDiv.attributes('style')).toContain('background-image: url(someUrl)');
    
    // 可选：验证子组件的渲染逻辑（根据v-if的someCondition判断）
    // 若someCondition为true，检查子组件占位符存在
    // expect(wrapper.findComponent(ChildComponent).exists()).toBe(true);
    // 若someCondition为false，检查不存在
    // expect(wrapper.findComponent(ChildComponent).exists()).toBe(false);
  });
});

备选方案：调整HTML匹配字符串（不推荐） #

如果一定要沿用toContain匹配HTML，需要把子组件的stub标签加入预期字符串中（注意stub标签名由组件名转换而来，比如ChildComponent会变成<child-component-stub>）：

describe('ParentComponent.vue', () => {
  it('renders a ParentComponent', () => {
    const wrapper = shallowMount(ParentComponent, {
      propsData: {
        propOne: 'someUrl',
        propTwo: 'someText'
      }
    });
    expect(wrapper.find('.some-class').html()).toContain(
      '<div alt="someText" class="some-class" style="width: 2rem; height: 2rem; background-image: url(someUrl);"><child-component-stub></child-component-stub></div>'
    );
  });
});

注意：这种方式不稳定，HTML的格式（如空格、引号）或组件名的微小变化都可能导致断言失败，不推荐使用。

额外修正点 #

你原来的预期字符串中，background-image: url(propOne)是错误的，应该替换为url(someUrl)——因为propOne传入的实际值是someUrl，之前没暴露问题是因为原组件没有子组件，但这是一个逻辑错误，需要一起修正。

内容的提问来源于stack exchange，提问作者Zuzanna