如何用Jest检测元素是否存在指定属性？附SVG路径元素示例

没问题，我来帮你搞定这个Jest测试的问题，顺便把通用的属性查找方法也讲清楚～

针对你提供的SVG路径的具体测试 #

首先，假设你已经配置好了Jest的DOM环境（一般用jsdom即可），我们可以直接把目标SVG插入测试DOM，然后做验证：

test('SVG路径元素TrendLine包含d属性', () => {
  // 将你的SVG路径插入测试用的DOM中
  document.body.innerHTML = `
    <path id="TrendLine" fill="none" stroke="black" d="M170,28.76363636363638C170,28.76363636363638,221.46221083573664,189.150059910"></path>
  `;

  // 通过ID获取目标路径元素
  const trendLineElement = document.getElementById('TrendLine');

  // 先确保元素存在，避免后续测试报错
  expect(trendLineElement).toBeInTheDocument(); // 需搭配@testing-library/jest-dom匹配器

  // 检测d属性是否存在
  expect(trendLineElement.hasAttribute('d')).toBe(true);

  // 可选：验证d属性的具体值是否符合预期
  expect(trendLineElement.getAttribute('d')).toBe(
    'M170,28.76363636363638C170,28.76363636363638,221.46221083573664,189.150059910'
  );
});

用Jest查找元素特定属性的通用方法 #

不管是SVG元素还是普通HTML元素，查找和验证属性的逻辑都是通用的，主要有两种方式：

1. 原生DOM API结合Jest断言 #

• 获取元素：用原生DOM方法比如getElementById、querySelector、getElementsByClassName等获取目标元素；如果是React/Vue等框架的组件，需要先渲染组件再获取DOM节点。
• 检查属性是否存在：使用element.hasAttribute('属性名')返回布尔值，配合expect(...).toBe(true)断言。
• 获取并验证属性值：使用element.getAttribute('属性名')获取属性值，然后可以用toBe、toContain等匹配器验证。

2. 结合测试库的专用匹配器（更简洁） #

如果你用了@testing-library/jest-dom（React Testing Library默认包含），可以直接用toHaveAttribute这个匹配器，一步完成存在性和值的验证：

// 仅验证属性存在
expect(trendLineElement).toHaveAttribute('d');

// 同时验证属性名和对应值
expect(trendLineElement).toHaveAttribute(
  'd',
  'M170,28.76363636363638C170,28.76363636363638,221.46221083573664,189.150059910'
);

框架组件中的示例（以React为例） #

如果你的SVG是在React组件里渲染的，测试代码会是这样：

import { render, screen } from '@testing-library/react';
import YourSVGComponent from './YourSVGComponent';

test('组件中的SVG路径包含d属性', () => {
  render(<YourSVGComponent />);
  // 建议给path加上data-testid属性，比如data-testid="trend-line"
  const trendLine = screen.getByTestId('trend-line');
  
  // 直接验证d属性存在
  expect(trendLine).toHaveAttribute('d');
});

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