React Router <LINK>如何在 Jest 测试中获取 href 的值答案

【问题标题】：React Router <LINK>How to get value of href in Jest TestReact Router <LINK>如何在 Jest 测试中获取 href 的值
【发布时间】：2016-08-03 22:00:01
【问题描述】：

React JS 新手并在 Jest 中编写测试用例来检查组件中的链接。我正在使用react-router，对于使用<LINK to="{{pathname: link}}" />Link</LINK> 的链接，我使用的是react-router 2.0。我看到一些帖子建议您需要以一种或另一种方式对 react-router 进行存根，但这些都与 1.0 版有关。我还需要做类似的事情吗？我可以通过选择类来获取节点，但我无法获取href 的值。

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

请指教。

【问题讨论】：

有人对此有答案吗？

标签： javascript reactjs react-router jestjs

【解决方案1】：

如果您想使用enzyme，我认为这可能会起作用。如果您只关心匹配 href（或 Link "to" 属性），则可以这样做：

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');

【讨论】：

【解决方案2】：

这是我的 2 次尝试，它们也不起作用：

更新

在我的测试用例中，发现 <p> 标签适用于：

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

但是查找react-routerLink生成的<a>标签失败：

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

我的反应组件

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

         <p>junk rat</p>

      </div>
    );
  }
}

原帖

在测试文件顶部添加： 从'react-router'导入{链接}；

尝试 1

笑话测试

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');
});

尝试 2

玩笑测试2

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

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

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

});

这是我的 Jest 测试文件的顶部：

// __tests__/MyHeaderMenu-test.js

jest.unmock('../app/components/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/components/MyHeaderMenu';


describe('MyHeaderMenu', () => {

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

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

【讨论】：