React路由器<link>如何在Jest测试中获取href的值

React Router <LINK>How to get value of href in Jest Test

本文关键字：测试 Jest 获取 href 的值 lt 路由器 link gt React      更新时间：2024-05-20

React JS新手，并在Jest中编写测试用例以检查组件中的链接。我使用react-router，对于使用<LINK to="{{pathname: link}}" />Link</LINK>的链路，我使用react router 2.0。我看到一些帖子建议您需要以某种方式截断react路由器，但这些都与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');

请告知。

我认为如果你想使用酶，这可能会奏效。如果你只关心匹配href（或链接"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');

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

更新

在我的测试用例中，发现<p>标签与一起工作

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

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

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

我的React组件

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

原始帖子

在测试文件顶部添加：从"react router"导入｛Link｝；

尝试1

Jest测试

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

Jest测试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 ...
相关文章：