Vue组件单元测试：断言元素添加指定CSS类失败求助

嘿，我一眼就发现问题所在了——你的测试选择器因为ID里的.字符被错误解析，导致找不到目标元素！

咱们来拆解下：你在测试里用wrapper.find(tr#list-lg-item-${i.id})查找元素，假设你的item.id是id.1，那生成的选择器会是tr#list-lg-item-id.1。但CSS选择器里的.是类选择器的标记，这个选择器会被理解成找id为list-lg-item-id且带有类1的<tr>元素，可实际你的元素id是list-lg-item-id.1，完全不匹配，所以才会报错找不到。

两种快速解决方案 #

1. 用属性选择器替代ID选择器 #

这是最简单可靠的方式，直接通过[id="xxx"]的属性匹配，不会解析ID里的特殊字符：

it('highlights global items in the list', () => {
  Items
    .filter((i) => i.isGlobalItem())
    .forEach((i) => {
      const targetId = `list-lg-item-${i.id}`;
      const row = wrapper.find(`tr[id="${targetId}"]`);
      expect(row.classes()).to.contain('list-global-item');
    });
});

另外提一句，这里用forEach比map更合适，因为我们是要执行断言操作，map是用来生成新数组的，用在这里语义不对。

2. 转义ID中的特殊字符 #

如果你坚持要用ID选择器，就得把ID里的.转义成CSS能识别的格式（模板字符串里要写\\.来转义）：

it('highlights global items in the list', () => {
  Items
    .filter((i) => i.isGlobalItem())
    .forEach((i) => {
      const escapedId = i.id.replace(/\./g, '\\.');
      const row = wrapper.find(`tr#list-lg-item-${escapedId}`);
      expect(row.classes()).to.contain('list-global-item');
    });
});

额外的测试健壮性建议 #

其实依赖动态生成的ID写测试不是最佳实践，万一以后ID的命名规则变了，测试就会失效。你可以给行元素加个测试专用的属性，比如data-testid：

模板修改：

<tr 
  :id="'list-lg-item-' + item.id" 
  v-for="item in items" 
  :key="item.id" 
  :class="itemClass(item)"
  data-testid="item-row"
>

然后测试里可以这样写，更灵活也更健壮：

it('highlights global items in the list', () => {
  const globalItemIds = new Set(Items.filter(i => i.isGlobalItem()).map(i => i.id));
  const rows = wrapper.findAll('[data-testid="item-row"]');
  
  rows.wrappers.forEach((row) => {
    // 从元素的ID里提取item.id
    const itemId = row.attributes('id').replace('list-lg-item-', '');
    if (globalItemIds.has(itemId)) {
      expect(row.classes()).to.contain('list-global-item');
    } else {
      expect(row.classes()).not.to.contain('list-global-item');
    }
  });
});

这样就算以后ID格式调整，只要data-testid不变，测试就能正常运行啦。

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