React-Router: How to test href of a rendered Link?

Question

I have a React component that renders a <Link/>.

render: function () {
    var record = this.props.record;
    return (
        <Link to="record.detail" params={{id:record.id}}>
            <div>ID: {record.id}</div>
            <div>Name: {record.name}</div>
            <div>Status: {record.status}</div>
        </Link>
    );
}

I can easily obtain the rendered <a/>, but I'm not sure how to test that the href was built properly.

function mockRecordListItem(record) {
    return stubRouterContext(require('./RecordListItem.jsx'), {record: record});
}
it('should handle click', function () {
    let record = {id: 2, name: 'test', status: 'completed'};
    var RecordListItem = mockRecordListItem(record);
    let item = TestUtils.renderIntoDocument(<RecordListItem/>);

    let a = TestUtils.findRenderedDOMComponentWithTag(item, 'a');
    expect(a);

    // TODO: inspect href?
    expect(/* something */).to.equal('/records/2');
});

Notes: The stubRouterContext is necessary in React-Router v0.13.3 to mock the <Link/> correctly.

Edit:

Thanks to Jordan for suggesting a.getDOMNode().getAttribute('href'). Unfortunately when I run the test, the result is null. I expect this has to do with the way stubRouterContext is mocking the <Link/>, but how to 'fix' is still TBD...

Answer 1

I use jest and enzyme for testing. For Link from Route I use Memory Router from their official documentation https://reacttraining.com/react-router/web/guides/testing

I needed to check href of the final constructed link. This is my suggestion:

MovieCard.js:

export function MovieCard(props) {
  const { id, type } = props;
  return (
    <Link to={`/${type}/${id}`} className={css.card} />
  )
};

MovieCard.test.js (I skip imports here):

const id= 111;
const type= "movie";

test("constructs link for router", () => {
    const wrapper = mount(
      <MemoryRouter>
        <MovieCard type={type} id={id}/>
      </MemoryRouter>
    );

    expect(wrapper.find('[href="/movie/111"]').length).toBe(1);
  });

Answer 2

Ok. This simply took some digging into the stubRouterContext that I already had.

The third constructor argument, stubs, is what I needed to pass in, overriding the default makeHref function.

Working example:

function mockRecordListItem(record, stubs) {
    return stubRouterContext(require('./RecordListItem.jsx'), {record: record}, stubs);
}
it('should handle click', function () {
    let record = {id: 2, name: 'test', status: 'completed'};
    let expectedRoute = '/records/2';
    let RecordListItem = mockRecordListItem(record, {
        makeHref: function () {
            return expectedRoute;
        }
    });
    let item = TestUtils.renderIntoDocument(<RecordListItem/>);
    let a = TestUtils.findRenderedDOMComponentWithTag(item, 'a');
    expect(a);

    let href = a.getDOMNode().getAttribute('href');
    expect(href).to.equal(expectedRoute);
});

It was right there in front of me the whole time.

Answer 3

You can use a.getDOMNode() to get the a component's DOM node and then use regular DOM node methods on it. In this case, getAttribute('href') will return the value of the href attribute:

let a = TestUtils.findRenderedDOMComponentWithTag(item, 'a');
let domNode = a.getDOMNode();

expect(domNode.getAttribute('href')).to.equal('/records/2');