How to test that my input has a ref attribute?

user_3061047 0
Viewed 1139

I am using React Testing Library and I have a component that takes in a prop value for a ref that will be used within a <input />.

const InputComp = (ref) => <Input data-testid="test-input" ref={ref} />

I am then passing a simple useRef() into this component form the parent such as

const SomeParent = () => {

    const myRef = useRef();

    return <InputComp ref={myRef} />
}

My question now is, how would I test that I can pass in a ref and that it will be present within the InputComp?

I have attempted the following:

it('Should render with a ref', () => {
    const testRef = createRef();

    const rendered = render(<InputComp ref={testRef} />);

    expect(rendered.getByTestId('test-input')).toHaveAttribute(testRef)
    expect(rendered.getByTestId('test-input').getAttribute('ref')).toBe(testRef);
});

Both of these assertions fail with the following reason:

Expected the element to have attribute:
   {"current": <input data-testid="test-input" />}
Received:
   null
use-ref testing-library react-testing-library reactjs
1 Answers

The 'ref' attribute wont flow down to the DOM. Also, the whole guiding principle of the react-testing-library is this: (https://testing-library.com/docs/guiding-principles/)

The more your tests resemble the way your software is used, the more confidence they can give you

What you test here doesn't adhere to what you want users to interact with. Instead you should focus on what you are trying to achieve from the ref. For example, styling, data, etc.

user_29314100
Related