如何使用Enzyme定位包含Link的Row组件？

嘿，我来帮你搞定这个定位问题！你现在用wrapper.find(Row).at(0)是直接取第一个Row组件，但显然目标Row不是第一个——咱们得换一种更可靠的方式，基于组件的内容（子元素Link）来定位，而不是依赖索引（索引会随着组件结构变化而失效，维护性很差）。

下面给你几种实用的方法，按推荐优先级排序：

方法1：通过子元素Link筛选Row（最可靠） #

利用Enzyme的filterWhere方法，遍历所有Row组件，找出包含Link的那个：

// 筛选出所有包含Link子组件的Row，取第一个（如果只有一个目标Row）
const targetRow = wrapper.find(Row).filterWhere(row => row.find(Link).exists()).first();

如果你的结构里有多个带Link的Row，还可以结合其他特征进一步筛选（比如Link的文本、Row的额外属性）。

方法2：给目标Row加专属属性，精准定位 #

如果可以修改组件代码，给包含Link的Row加一个独特的className或者测试专属属性，比如：

<Row className="action-row" data-testid="link-container-row">
  <Link>...</Link>
</Row>

那定位起来就更直接：

// 通过className定位
const targetRow = wrapper.find(Row).filter('.action-row');
// 或者通过data-testid（推荐用于测试，不会和样式耦合）
const targetRow = wrapper.find('[data-testid="link-container-row"]');

方法3：通过Link的文本内容匹配 #

如果你的Link有固定文本，比如<Link>查看详情</Link>，也可以用containsMatchingElement来匹配：

const targetRow = wrapper.find(Row).containsMatchingElement(
  <Link>查看详情</Link>
);

不过这种方法依赖文本内容，一旦文本修改测试就会失败，适合文本稳定的场景。

为什么不推荐用at(0)？ #

组件的结构随时可能调整（比如新增一个Row在前面），这时候at(0)就会定位到错误的组件，导致测试用例失效。用基于子元素、专属属性的定位方式，测试用例的鲁棒性会强很多，更符合UI TDD的维护要求。

内容的提问来源于stack exchange，提问作者Pramod S. Nikam