從鏈接組件測試href值同時使用動態鏈接

Question

我正在尋找解決方案，以便仍然能夠使用來自react-router的鏈接而不是在測試href屬性值時使用鏈接。 的確，我有一些根據上下文改變路線的組件。但是，當我測試href屬性值時，返回的唯一東西是null。 但是，當我使用a時，它會返回我期望的值。

這裏是一個失敗的測試：

import React from 'react'; 
import {Link} from 'react-router'; 
import TestUtils from 'react-addons-test-utils'; 
import expect from 'must'; 

const LINK_LOCATION = '/my_route'; 

class TestComponent extends React.Component { 

    render() { 
     return (
      <div> 
       <Link className='link' to={LINK_LOCATION}/> 
       <a className='a' href={LINK_LOCATION}/> 
      </div> 
     ); 
    } 
} 

describe('Url things',() => { 
    it('should return me the same href value for both link and a node',() => { 
     const test_component = TestUtils.renderIntoDocument(<TestComponent/>); 
     const link = TestUtils.findRenderedDOMComponentWithClass(test_component, 'link'); 
     const a = TestUtils.findRenderedDOMComponentWithClass(test_component, 'a'); 
     expect(link.getAttribute('href')).to.eql(a.getAttribute('href')); 
    }); 
}); 

輸出：Asse田：空必須等同於從陣營路由器「/ my_route」

knowbody回答，看看他們是如何測試環節，但他們沒有可以改變href屬性值的動態上下文。

所以我做了這樣的事情：

class ComponentWrapper extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {}; 
    } 

    set_props(props) { 
     this.setState({props}); 
    } 

    render() { 
     if (this.state.props) { 
      return <Component {...this.state.props}/>; 
     } 
     return null; 
    } 
} 

但是現在，從我的組件幫手：

render_into_document() { 
    const full_component_props = { 
     location: this.location, 
     widget_categories: this.widget_categories 
    }; 
    node = document.createElement('div'); 
    this.component = render((
     <Router history={createHistory('/')}> 
      <Route path='/' component={ComponentWrapper} /> 
     </Router> 
    )); 
    this.component.set_props(full_component_props); 
    return this; 
} 

我不能爲了上this.component奠定手修改的道具。我怎麼能這樣做？

Answer 1

我只是看着how react-router tests <Link />以及與此想出了我的情況：

import test from 'ava' 
import React from 'react' 
import { render } from 'enzyme' 
import { Router, Route } from 'react-router' 
import createHistory from 'history/lib/createMemoryHistory' 
import SkipToXoom from '../skip-to-xoom' 


test('the rendered button redirects to the proper URL when clicked', t => { 
    const toCountryData = { countryName: 'India', countryCode: 'IN' } 
    const div = renderToDiv({ toCountryData, disbursementType: 'DEPOSIT', userLang: 'en_us' }) 
    const { attribs: { href } } = div.find('a')[0] 
    t.true(href.includes(encodeURIComponent('receiveCountryCode=IN'))) 
    t.true(href.includes(encodeURIComponent('disbursementType=DEPOSIT'))) 
    t.true(href.includes(encodeURIComponent('languageCode=en'))) 
}) 

/** 
* Render the <SkipToXoom /> component to a div with the given props 
* We have to do some fancy footwork with the Router component to get 
* the Link component in our SkipToXoom component to render out the href 
* @param {Object} props - the props to apply to the component 
* @returns {Element} - the div that contains the element 
*/ 
function renderToDiv(props = {}) { 
    return render(
     <Router history={createHistory('/')}> 
      <Route path="/" component={() => <SkipToXoom {...props} userLang="en" />} /> 
     </Router> 
    ) 
} 

我希望這是有幫助！