Question

我的应用程序使用react-router来管理用户导航，现在我需要添加单元测试我不知道如何改变路由。

我的<App />是（简化）：

class AppUser extends Component {
    render() {
        return (
            <div className="layout">
                {this.props.children}
            </div>
        );
    }
}

class Initial extends Component {
    render() {
        return (
            <div className="initial" />
        );
    }
}

export default class App extends Component {
    render() {
        let masterPageBase = (props) => (
            <AppUser>
                {props.children}
            </AppUser>
        );

        let notFound = () => (
            <div>
                <h1>Not found!</h1>
            </div>
        );

        <Router history={browserHistory}>
            <Route path="/" component={masterPageBase}>
                <IndexRoute component={Initial} />
                <Route path="*" component={notFound} />
            </Route>
        </Router>
    }
}

我的测试是：

describe('<App />', () => {
    it('user', () => {
        const wrapper = shallow(<App />);

        // FIXME This fails
        expect(wrapper.find('AppUser').length).toEqual(1);
    });
});

如何更改路线以便成为现有的孩子。

Answer 1

这是你在测试中假冒路线的方法：

有一个名为history的模块，您可以使用该模块在测试中创建虚假的浏览器历史记录。为了应用它，您需要在其使用的历史记录中使路由器参数化，如下所示：

export default class App extends Component {
    render() {
        createRouter(browserHistory);
    }
}

export function createRouter(history) {
    let masterPageBase = (props) => (
        <AppUser>
            {props.children}
        </AppUser>
    );

    let notFound = () => (
        <div>
            <h1>Not found!</h1>
        </div>
    );

    return <Router history={history}>
        <Route path="/" component={masterPageBase}>
            <IndexRoute component={Initial} />
            <Route path="*" component={notFound} />
        </Route>
    </Router>
}

在测试中，您可以使用历史记录模块创建虚假历史记录：

import { useRouterHistory } from "react-router";
import createMemoryHistory from "history/lib/createMemoryHistory";

function navigatingTo(path) {
    return mount(createRouter(useRouterHistory(createMemoryHistory)(path)));
}

describe('Router', () => {
    it('user', () => {

        expect(navigatingTo("/").find('AppUser').length).toEqual(1);
    });
});

PS：如果你在node.js中运行这些测试，那么你需要使用jsdom来使酶的mount（）工作。

基于react-router的app测试

1 个答案: