How to find an element based on its ref attribute?

[marlonbernardes]

When refactoring my tests to use enzyme, I wanted to find some elements based on their ref attribute. Is there a way to achieve that?

Lets say I have this component (it's just a made-up example):

export default class Example extends React.Component {

  render () {
    return (
      <form>
        <button ref="first-button">First button</button>
        <button ref="second-button">Second button</button>
       </form>
    )
  }
}

How do I find the second-button using its ref attribute?

  it('should find an element based on its ref attribute', () => {
    const component = shallow(<Example />)
    // This does not work yet, complex CSS selectors are not supported
    const button = component.find('button[ref="second-button"]');
    // This works, but I don't like depending on the JSX structure. 
    // My tests would fail if I added a new button or changed the button to a link, for example.
    const button = component.find('button').get(1);
  });

Is implementing a ref([key]) method a good/viable idea?

const button = component.ref('second-button');

I could help if you think this is something worth to have.

[marlonbernardes]

As a workaround, I added an ID/className to my elements, so I had something to use as an argument to find. I know it's not really bad, but since I already a ref attribute, I wish I could use it.

[ljharb]

I think this will be covered by #70, and is a duplicate of #4.

[lelandrichardson]

I don't think this will be covered by #70 (should probably double check though). This is because refs are special.

@marlonbernardes there is a .ref('refName') method in mount but it is not present for shallow because refs are not implemented for react's shallow renderer. We could maybe monkey patch something in to return the react node, but not the instance... (which i think could be a good addition)

[marlonbernardes]

@lelandrichardson thanks for the information! I did not know about this method because it's not present on the documentation. I just opened a new issue, to document the .ref(refName) method (#86) and I'm gonna fix that.

Using .ref(refName) on mount works for me, so I'm closing this issue. Thanks again!

[farzd]

Error: ReactWrapper::ref(refname) can only be called on the root 👎

[franciscolourenco]

@marlonbernardes .ref() doesn't return a wrapper