react-router - 在具有动态 Prop 的同时测试来自链接组件的 href 值

Question

我正在寻找一种解决方案，以便在测试 href 属性值时仍然能够使用来自 react-router 的 Link 而不是 a 。
事实上，我有一些组件会根据上下文改变路线。但是，当我测试 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'));
    });
});

输出:AssertionError:null 必须等价于“/my_route”

来自 React-router 的 knowbody 回答了他们如何测试 Link，但他们没有可以更改 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为了改变 Prop 。我怎么能那样做？

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

我希望这有帮助!