Testowanie React Router z linkiem

Question

Mam koszmar znalezienie dobrego rozwiązania do testowania łącza do routera React. Przekazuje "poprawnie renderuje kategorie", ale zerowe linki są przekazywane do testu, próbowałem tak wielu różnych rzeczy i wciąż mam donikąd.

Poniżej jest to, co usiłuję testu:

Komponent

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; 

testowania komponentów

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

Miałem dokładnie ten sam problem. W najnowszych wersjach routera reagowania nie potrzebujesz kontekstu do renderowania elementów linków, więc nie stanowi to problemu. Jednakże, jeśli utknąłeś na wersjach pre API 1.0, jak ja, podejście stubRouterContext działa dobrze.

Jedynym powodem, dla którego OP i I okazało się, że nasz wrapper renderował puste jest użycie nazwy komponentu camelCase.

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

Na skutek tego var categories = TestUtils.renderIntoDocument(<categoriesWithContext />,{}); staje się var categories = TestUtils.renderIntoDocument(<CategoriesWithContext />,{});.

Wyjaśnienie tego podejścia jest tutaj - https://gist.github.com/sebmarkbage/f1f4ba40816e7d7848ad.

Answer 2

Pierwszą rzeczą, którą zauważysz to ty 'nie jest ponowne renderowanie "categoriesWithContext" w drugim teście.

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

Chociaż sam nie uruchomiłem kodu, następną rzeczą, którą zauważam, jest sposób, w jaki pobierasz linki. W trakcie testu muszę ręcznie przeszukać hierarchię.

Spróbuj tego.

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