測試帶鏈接的反應路由器

我有一個噩夢找到測試React路由器鏈接的一個很好的解決方案。它正在傳遞'正確呈現類別'，但是零鏈接正在通過測試，我已經嘗試了很多不同的東西，但仍然無處可尋。測試帶鏈接的反應路由器

下面是什麼，我想測試：

組件

import React from 'react'; 
import { Link } from 'react-router'; 

class Categories extends React.Component { 

constructor(props, context){ 
    super(props); 
    context.router 
} 

render() { 
    return (
     <nav className="categories"> 
      <ul> 
       <li><Link to="devices">Devices</Link></li> 
       <li><Link to="cases">Cases</Link></li> 
       <li><Link to="layouts">Layouts</Link></li> 
       <li><Link to="designs">Designs</Link></li> 
      </ul> 
     </nav> 
    ); 
    } 
} 

Categories.contextTypes = { 
router: React.PropTypes.func.isRequired 
}; 

export default Categories;

StubRouterContext

import React from 'react'; 
import objectAssign from 'object-assign'; 

var stubRouterContext = (Component, props, stubs) => { 
function RouterStub() { } 

objectAssign(RouterStub, { 
    makePath() {}, 
    makeHref() {}, 
    transitionTo() {}, 
    replaceWith() {}, 
    goBack() {}, 
    getCurrentPath() {}, 
    getCurrentRoutes() {}, 
    getCurrentPathname() {}, 
    getCurrentParams() {}, 
    getCurrentQuery() {}, 
    isActive() {}, 
    getRouteAtDepth() {}, 
    setRouteComponentAtDepth() {} 
}, stubs) 

return React.createClass({ 
childContextTypes: { 
    router: React.PropTypes.func, 
    routeDepth: React.PropTypes.number 
}, 

getChildContext() { 
    console.log('blah'); 
    return { 
    router: RouterStub, 
    routeDepth: 0 
    }; 
}, 

render() { 
    return <Component {...props} /> 
} 
}); 
}; 

export default stubRouterContext;

組件測試

var expect = require('chai').expect; 

var React = require('react/addons'); 
var Categories = require('../app/src/js/components/Categories.React.js'); 
var stubRouterContext = require('../test-utils/stubRouterContext.js'); 
var TestUtils = React.addons.TestUtils; 

describe('Categories', function() { 
    var categoriesWithContext = stubRouterContext(Categories); 

    it('renders Categories properly', function() { 
    var categories = TestUtils.renderIntoDocument(<categoriesWithContext />, {}); 
}); 

it('renders 4 links', function() { 
    var catLinks = TestUtils.scryRenderedDOMComponentsWithTag(categoriesWithContext, 'a'); 
    expect(catLinks).to.have.length(4); 
}); 
});

來源

2015-04-14 Dan Beck

我有完全相同的問題。在反應路由器的最新版本中，您不需要上下文來呈現鏈接元素，所以這不是問題。但是，如果你像我一樣被困在預先的API 1.0版本中，那麼stubRouterContext方法運行良好。

OP和我發現我們的包裝渲染爲空的唯一原因是使用camelCase組件名稱。

var categoriesWithContext = stubRouterContext(Categories);變成var CategoriesWithContext = stubRouterContext(Categories);。

Therfore var categories = TestUtils.renderIntoDocument(<categoriesWithContext />,{});變成var categories = TestUtils.renderIntoDocument(<CategoriesWithContext />,{});。

這種方法的解釋在這裏 - https://gist.github.com/sebmarkbage/f1f4ba40816e7d7848ad。

來源

2015-08-27 09:49:57 Rich

我注意到的第一件事是你不是在第二個測試中重新渲染「categoriesWithContext」。

it('renders 4 links', function() { 
    var categories = TestUtils.renderIntoDocument(<categoriesWithContext />, {}); 
    var catLinks = TestUtils.scryRenderedDOMComponentsWithTag(categories, 'a'); 
    expect(catLinks).to.have.length(4); 
});

雖然我自己沒有運行你的代碼，但我注意到的下一件事是你提取鏈接的方式。在我有一個測試中，我必須手動挖掘層次結構。

試試這個。

it('renders 4 links', function() { 
    var categories = TestUtils.renderIntoDocument(<categoriesWithContext />, {}); 
    var ul = TestUtils.findRenderedDOMComponentWithTag(categories, 'ul'); 
    var lis = TestUtils.scryRenderedDOMComponentsWithTag(ul, 'li'); 
    lis.forEach(function(li) { 
    // this should throw if <a/> is not found 
    var a = TestUtils.findRenderedDOMComponentWithTag(li, 'a'); 
    // but write an explicit expectation anyway 
    expect(a); 
    }); 
});

來源

2015-05-19 16:53:03

測試帶鏈接的反應路由器

回答

相關問題