基于反应路由器的应用程序测试

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

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

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() 工作。