单元测试 – 如何使用Jest测试React Router？

2023年11月3日 498次阅读

我无法成功测试
React Router上下文.我在用

>反应0.13.3
> react-router 0.13.3
>开玩笑0.3.0
>节点0.10.33

并尝试过这些方法：

> https://labs.chie.do/jest-testing-with-react-router/
> https://gist.github.com/alanrubin/da3f740308eb26b20e70

有确凿的例子吗？

this question中提及的“super-secret guide”(不使用Jest)的所有链接现已破坏.当我能够查看该指南时,它没有提供比上面列出的第一个链接更多的信息.

最佳答案 不确定这是否正是你正在寻找的东西,但我通过制作一个帮助函数来解决这个问题,我在为依赖路由器状态的组件编写jest测试时使用它.

//router-test-helper
var Router = require('react-router'),
    Route = Router.Route,
    TestLocation = require('react-router/lib/locations/TestLocation');

module.exports = function(React){
    TestUtils = React.addons.TestUtils;
    return {
        getRouterComponent: function(targetComponent, mockProps) {
            var component,
                div = document.createElement('div'),
                routes = [
                    React.createFactory(Route)({
                        name: '/',
                        handler: targetComponent
                    })
                ];

            location = new TestLocation('/');
            Router.run(routes, location, function (Handler) {
                var mainComponent = React.render(React.createFactory(Handler)(mockProps), div);
                component = TestUtils.findRenderedComponentWithType(mainComponent, targetComponent);
            });
            return component;
        }
    };
};

我自己并没有写下所有这些内容,我认为大部分内容都是从你现在已经关闭的指南中删除的.如果我没记错的话……已经有一段时间了.

在你拥有它之后,你可以在你的测试中使用它,就像这样.

//test-example
jest.dontMock('../src/js/someComponent');
var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var routerHelper = require('../router-test-helper')(React);
var SomeComponent = require('../srcs/js/someComponent');

describe('Some Component', function(){
    it('should be testable', function(){
        var mockProps = {}; 
        var renderedComponent = routerHelper.getRouterComponent(SomeComponent, mockProps);
        // Test your component as usual from here.....
        ///////////////////////////////////////////////

        var inputs = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, 'input');
        //blah blah blah
    });
});

假设您在未模拟的模块路径中有React和帮助程序

如果你真的试图测试特定于某些路线的东西,或者在路线之间转换……我不确定这是不是一个好方法.可能更好地使用更多集成测试-y,比如硒等等.另外……一旦反应路由器的1.0出来,这可能不会起作用.但是测试“React Way”(tm)的东西可能更容易,因为所有的路由选择都将通过道具进行处理.至少那是我从我读过的那一点点得到的印象.

点赞