如何测试组件是否具有属性？

Question

我用testing-library

如果您有语法解决方案，我无法定位元素， 我正在尝试检索标签并比较xlinkHref。 我可以获得整个组件，但没有类名或 ID，这让我很困扰 // Type.test.jsx

import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';

import Type from '../index';

describe('Type', () => {

  it('Watch Type', () => { 
    const {container} = render(<Type type="Watch Type" />);

    expect(container.firstElementChild.getAttribute('xlinkHref')).toHaveAttribute('xlinkHref', 'https://www.test.com/')
  });

});

// Type.jsx

import React from 'react';

const Type = (props) => {
  const type = props.type;

  if (type === 'Watch Type') {
    return (
      <span className="platform-icon">
        <svg>
          <use xlinkHref="https://www.test.com/" />
        </svg>
      </span>
    )
  }
}

export default App;

Answer 1

getAttribute(attributeName) 返回属性attributeName 的值，所以你应该这样做：

expect(container.querySelector('svg use').getAttribute('xlinkHref')).toEqual('https://www.test.com/');

见https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute