component.find('a).prop('href') returns undefined instead of the href value

Question

I have a navigation component that uses Link, IndexLink to render the navigation bar:

class Navigation extends Component {

  renderLinks = (linksData) => {
    return linksData.map((link) => {
      if(link.to === '/') {
        return (
          <li key={link.text}>
            <IndexLink to={link.to}>
              <i>{link.icon}</i>
              <span>{link.text}</span>
            </IndexLink>
          </li>
        );
      } else {
        return (
          <li key={link.text}>
            <Link to={link.to}>
              <i>{link.icon}</i>
              <span>{link.text}</span>
            </Link>
          </li>
        );
      }
    });
  };

  render() {
    const {links} = this.props;
    return(
      <div>
        <ul>
          {this.renderLinks(links)}
        </ul>
      </div>
    )
  }
}

Navigation.propTypes = {
  links: React.PropTypes.array.isRequired
}

export default Navigation;

Now I want to test that my links render correcttly:

import React from 'react';
import {Link, IndexLink} from 'react-router';
import {mount} from 'enzyme';
import Navigation from '../components/core/Navigation.component';

describe('<Navigation/>', () => {
  it('should render Navigation links', () => {
    const links = [
      {
        to: '/',
        icon: 'hourglass_empty',
        text: 'Timer'
      }
    ];
    const navigation = mount(<Navigation links={links}/>);
    console.log(navigation.find('a').prop('href'));
  });
});

But this just logs out undefined. How am I able to test that the correct href value is getting passed to my anchors?

Templin

Did you try binding your renderLinks method? – Cauldron

nope not yet, since when I host this localy everything works as expected – Danas

I think this has something to do with the solution not rendering correctly. I can find the IndexLink component prop if I look for it. It is just weird, because my tests to find anchor work as well... – Danas

Answer 1

try this: wrapper.find(Foo).at(0).props().href

Inexpiable

why is .props().href working but .prop('href') isn't? – Riddance

Answer 2

This question is related to React, but for Vue, the following code works:

wrapper.find('.link').attributes('href')

Ambitendency

Answer 3

The link has a prop of to in React to query the link find it by the text you click - and the right attribute is to not href

eg:

const url1 = screen.getByText("I am a link click me")
expect(url1).toHaveAttribute("to", "https://test-url1#")

Promiscuous