Test React Router con Link

Question

Sto avendo un incubo trovando una buona soluzione per testare un collegamento React Router. Sta trasmettendo "correttamente le Categorie di rendering", ma i collegamenti zero vengono passati al test, ho provato tante cose diverse e non ho ancora ottenuto nulla.

Qui di seguito è quello che sto cercando di prova:

Componente

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; 

la prova componente

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

Answer 1

Ho avuto esattamente lo stesso problema. Nelle ultime versioni di react-router, non è necessario il contesto per il rendering degli elementi di collegamento, quindi questo non è un problema. Tuttavia, se sei bloccato su versioni pre 1.0 API come sono, l'approccio stubRouterContext funziona bene.

L'unico motivo per cui OP e ho trovato che il nostro wrapper era vuoto è l'uso di un nome di componente CamelCase.

var categoriesWithContext = stubRouterContext(Categories); diventa var CategoriesWithContext = stubRouterContext(Categories);.

Quindi var categories = TestUtils.renderIntoDocument(<categoriesWithContext />,{}); diventa var categories = TestUtils.renderIntoDocument(<CategoriesWithContext />,{});.

Spiegazione di questo approccio è qui - https://gist.github.com/sebmarkbage/f1f4ba40816e7d7848ad.

Answer 2

La prima cosa che ho notato è che si non lo sono ri-rendering "categoriesWithContext" nel secondo test.

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

Anche se non ho eseguire il codice me stesso, la prossima cosa che noto è il modo in cui si sta recupero i link. In un test che ho, devo scavare manualmente nella gerarchia.

Prova questo.

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