New to React JS and writing a test case in Jest to check the link in the ponent. I am using react-router and for the link using <LINK to="{{pathname: link}}" />Link</LINK>, I'm using react-router 2.0. I saw some posts that suggest you need to stub the react-router one way or the other but those are all related to the version 1.0. Do I still need to do something similar? I am able to get the node by selecting with class but I cannot get the value of href.

 let link = TestUtils.findRenderedDOMComponentWithClass(widgetComponent, 'link');
 let linkNode = ReactDOM.findDOMNode(link);
 let renderedLink = linkNode.attributes['href'].value;
 expect(renderedLink).toContain('test-link');

Please advise.

New to React JS and writing a test case in Jest to check the link in the ponent. I am using react-router and for the link using <LINK to="{{pathname: link}}" />Link</LINK>, I'm using react-router 2.0. I saw some posts that suggest you need to stub the react-router one way or the other but those are all related to the version 1.0. Do I still need to do something similar? I am able to get the node by selecting with class but I cannot get the value of href.

 let link = TestUtils.findRenderedDOMComponentWithClass(widgetComponent, 'link');
 let linkNode = ReactDOM.findDOMNode(link);
 let renderedLink = linkNode.attributes['href'].value;
 expect(renderedLink).toContain('test-link');

Please advise.

• javascript
• reactjs
• react-router
• jestjs

• Anyone has an answer for this? – sayayin Commented May 9, 2017 at 3:50

2 Answers 2

I think this might work if you want to use enzyme. You can do something like this if you only care about matching the href (or the Link "to" prop):

import React from 'react';
import { Link } from 'react-router';
import { shallow } from 'enzyme';

const wrapper = shallow(widgetComponent);
expect(wrapper.find(Link).props().to).toEqual('test-link');

Here's my 2 attempts, they are not working either:

UPDATE

In my test case finding the <p> tag works with:

myDomNode.querySelectorAll('p')[0] // Success = [object HTMLParagraphElement]

But finding the <a> tag generated by react-router Link fails:

myDomNode.querySelectorAll('a')[0] // = undefined

My React Component

export default class MyHeaderMenu extends React.Component {
  render() {
    return (
      <div>
         <Link to={`/`}>HOME</Link> {" | "} 

         <p>junk rat</p>

      </div>
    );
  }
}

ORIGINAL POST

at top of test file add: import { Link } from 'react-router';

ATTEMPT 1

Jest test

it('Home text appears', () => {
   const myDomNode = ReactDOM.findDOMNode(instance);

   // This returns undefined: myDomNode.getElementsByTagName("a")[0]
   // so innerHTML is failing.
   const linkNode = myDomNode.getElementsByTagName("a")[0].innerHTML

   expect(linkNode).toContain('Home');
});

ATTEMPT 2

Jest test 2

it('Home text appears', () => {
   const myDomNode = ReactDOM.findDOMNode(instance);

   const myLinks = TestUtils.findAllInRenderedTree(instance,       
      function(ponent) {
         if (ponent === Link) {
            return true;
         }
      }
   );

   expect( myLinks[0].textContent ).toContain('Home');

});

Here's the top section of my Jest test file:

// __tests__/MyHeaderMenu-test.js

jest.unmock('../app/ponents/MyHeaderMenu');

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import { Link } from 'react-router';

import MyHeaderMenu from '../app/ponents/MyHeaderMenu';


describe('MyHeaderMenu', () => {

    const instance = TestUtils.renderIntoDocument(
        <MyHeaderMenu />
    );

    it //... test cases start here ...