How can I test that a component has an attribute?

Question

I use testing-library

I can't target the element if you have syntax solutions, I'm trying to retrieve the tag and compare the xlinkHref. I can get the whole component and not having a class name or ID it bothers me // 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) returns the value of the attribute attributeName, so you should just do :

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

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