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

输出：AssertionError：null必须等同于＆＃34; / my_route＆＃34;

来自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来改变道具。我怎么能这样做？

Answer 1

我只是看了how react-router tests <Link />并为我的案例提出了这个问题：

TAB1
----- -----  ---- ----
KEY   L1     L2   L3
---- -----  ----- ----
A     A
B     A     B
C     A     B     C
D     A     B     D

TAB2
-----
KEY   TC 
----  ----
A      10
B      11
C      6
D      12
X      11

Expected Output:

KEY  SUM
---- ----
A    39
B    29
C    6
D    12
X    11

我希望这有用！

在拥有动态道具的同时测试链接组件的href值

1 个答案: