Vue TestDome图片画廊组件本地正常但测试不通过问题求助

本周准备TestDome的Vue测试时，遇到一道实现image-gallery组件的练习题，要求如下：

• 组件接收links prop，按顺序渲染图片画廊
• 点击图片对应的删除按钮，移除该图片所在的<div>元素

我的代码在本地能正常渲染图片和按钮，点击也能正确删除对应图片，但TestDome测试中仅「ImageGallery将渲染正确列表」通过，示例用例、删除单图、删除多图均报错，输出结果看似符合要求，求问题原因。

题目示例 #

初始预期HTML #

<div>
  <div class="image">
    <img src="https://www.testdome.com/files/resources/12362/aff5c408-79f8-4220-9769-8b4cde774c98.jpg">
    <button class="remove">X</button>
  </div>
  <div class="image">
    <img src="https://www.testdome.com/files/resources/12362/dbd97d8f-cc11-48bd-bf21-b8762a39a55e.jpg">
    <button class="remove">X</button>
  </div>
</div>

删除第一张图片后的预期HTML #

<div>
  <div class="image">
    <img src="https://www.testdome.com/files/resources/12362/dbd97d8f-cc11-48bd-bf21-b8762a39a55e.jpg">
    <button class="remove">X</button>
  </div>
</div>

我的实现代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Image Gallery</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <image-gallery :links="links" @remove-link="removeLink"/>
  </div>
  <script>
    // Create image-gallery component that accepts link prop
    Vue.component('image-gallery', {
      props: ['links'],
      template: `
      <div>
        <div v-for="link in links" class="image">
          <img :src="link" />
          <button @click="removeLink(link)" class="remove">X</button>
        </div>
        </div>
      `,
      methods: {
        removeLink (link) {
          this.$emit('remove-link', link)
        }
      }}
    );
    
    var vm = new Vue({
      el: "#app",
      data () {
        return {
          links: ['https://www.testdome.com/files/resources/12362/aff5c408-79f8-4220-9769-8b4cde774c98.jpg', 'https://www.testdome.com/files/resources/12362/dbd97d8f-cc11-48bd-bf21-b8762a39a55e.jpg']
        }
      },
      methods: {
        removeLink(link) {
            this.links = this.links.filter(l => l !== link)
        }
      }
      }
    );
    
    // Example case
    let firstButton = document.querySelectorAll("div.image > button")[0];
    if(firstButton) {
    firstButton.click();  
    }
    
    setTimeout(() => console.log(document.getElementById("app").innerHTML));
  </script>
</body>
</html>

测试结果与输出 #

TestDome测试结果 #

• Example case: Wrong answer
• ImageGallery will render the correct list: Correct answer
• Remove a single image: Wrong answer
• Remove multiple images: Wrong answer

输出结果 #

<div><div class="image"><img src="https://www.testdome.com/files/resources/12362/dbd97d8f-cc11-48bd-bf21-b8762a39a55e.jpg"> <button class="remove">X</button></div></div>

核心问题1：v-for未指定唯一key #

Vue的列表渲染依赖key追踪每个节点身份，没有key时会采用“就地复用”策略更新DOM。TestDome的测试可能严格校验DOM更新的准确性，这种复用机制会导致测试无法正确识别删除操作后的DOM变化，即使最终输出看起来正确。

核心问题2：通过链接字符串删除存在隐患 #

用filter(l => l !== link)删除元素时，若links中存在重复图片链接，会一次性删除所有匹配项，不符合“删除对应单张图片”的要求。TestDome的测试用例大概率包含重复链接场景，导致删除逻辑失效。

修复后的代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Image Gallery</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <image-gallery :links="links" @remove-link="removeLink"/>
  </div>
  <script>
    Vue.component('image-gallery', {
      props: ['links'],
      template: `
      <div>
        <!-- 添加index作为key，确保每个列表项唯一标识 -->
        <div v-for="(link, index) in links" :key="index" class="image">
          <img :src="link" />
          <!-- 点击时传递当前项的索引 -->
          <button @click="removeLink(index)" class="remove">X</button>
        </div>
      </div>
      `,
      methods: {
        removeLink (index) {
          this.$emit('remove-link', index)
        }
      }
    });
    
    var vm = new Vue({
      el: "#app",
      data () {
        return {
          links: ['https://www.testdome.com/files/resources/12362/aff5c408-79f8-4220-9769-8b4cde774c98.jpg', 'https://www.testdome.com/files/resources/12362/dbd97d8f-cc11-48bd-bf21-b8762a39a55e.jpg']
        }
      },
      methods: {
        // 通过索引精准删除对应项
        removeLink(index) {
            this.links.splice(index, 1)
        }
      }
    });
    
    // Example case
    let firstButton = document.querySelectorAll("div.image > button")[0];
    if(firstButton) {
      firstButton.click();  
    }
    
    setTimeout(() => console.log(document.getElementById("app").innerHTML));
  </script>
</body>
</html>

修复说明 #

1. 添加v-for的key：使用index作为每个列表项的唯一标识，让Vue能准确追踪DOM元素的变化，避免复用导致的测试识别错误。
2. 改用索引删除：通过splice(index, 1)精准删除点击的图片项，彻底解决重复链接导致的误删问题，符合测试要求。

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