CODEWITHSUNDEEP
reactjsjestjsreact-testing-library
Cephas
Cephas

Reputation: 57

How can I test that a component has an attribute?

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;

Upvotes: 4

Views: 14360

Answers (1)

Florian Motteau
Florian Motteau

Reputation: 3714

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

Upvotes: 7

Related Questions