Question

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

请告知。

Answer 1

我认为如果您想使用enzyme，这可能会有效。如果你只关心匹配href（或链接＆＃34;到＆＃34;道具），你可以做这样的事情：

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

Answer 2

这是我的两次尝试，他们也没有工作：

<强>更新

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

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

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

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

我的反应组件

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

         <p>junk rat</p>

      </div>
    );
  }
}

原始帖子

在测试文件顶部添加： 从＆＃39; react-router＆＃39;;

导入{Link}

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

ATTEMPT 2

Jest test 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 ...

React Router <link />如何在Jest Test

2 个答案: