react-router 基于应用测试

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

如何更改路线，使其成为现有的 child。

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

react-router 基于应用测试

react-router based app test

reactjs

jestjs

react-router