Skip to content

Instantly share code, notes, and snippets.

@ryanflorence
Last active October 20, 2015 04:41
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ryanflorence/1f72da0cd9e507ebec29 to your computer and use it in GitHub Desktop.
Save ryanflorence/1f72da0cd9e507ebec29 to your computer and use it in GitHub Desktop.
/** @jsx React.DOM */
function makeStubbedDescriptor(component, props, contextStubs) {
var TestWrapper = React.createClass({
childContextTypes: {
currentPath: React.PropTypes.string,
makePath: React.PropTypes.func.isRequired,
makeHref: React.PropTypes.func.isRequired,
transitionTo: React.PropTypes.func.isRequired,
replaceWith: React.PropTypes.func.isRequired,
goBack: React.PropTypes.func.isRequired,
isActive: React.PropTypes.func.isRequired,
activeRoutes: React.PropTypes.array.isRequired,
activeParams: React.PropTypes.object.isRequired,
activeQuery: React.PropTypes.object.isRequired,
location: React.PropTypes.object,
routes: React.PropTypes.array.isRequired,
namedRoutes: React.PropTypes.object.isRequired,
scrollBehavior: React.PropTypes.object
},
getChildContext: function() {
return merge({
currentPath: '__STUB__',
makePath: function() {},
makeHref: function() { return '__STUB__'; },
transitionTo: function() {},
replaceWith: function() {},
goBack: function() {},
isActive: function() {},
activeRoutes: [],
activeParams: {},
activeQuery: {},
location: {},
routes: [],
namedRoutes: {},
scrollBehavior: {}
}, contextStubs);
},
render: function() {
this.props.ref = '__subject__';
return component(this.props);
}
});
return TestWrapper(props);
}
// usage
var component = React.renderComponent(makeStubbedDescriptor(App, {}), document.body);
// do stuff with component now and the router isn't in your way
@OscarGodson
Copy link

This requires a merge function which I put at the top of the inside of the makeStubbedDescriptor function.

  function merge(obj1, obj2) {
      var obj3 = {};
      for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
      for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
      return obj3;
  }

@sorentwo
Copy link

sorentwo commented Nov 4, 2014

You can also require the merge packaged with React: var merge = require('react/lib/merge')

@MicheleBertoli
Copy link

I added this:

routeHandlers: React.PropTypes.array.isRequired,
getRouteAtDepth: React.PropTypes.func.isRequired,
getRouteComponents: React.PropTypes.func.isRequired,
getCurrentParams: React.PropTypes.func.isRequired

and this:

routeHandlers: [{}],
getRouteAtDepth: function() {},
getRouteComponents: function() { return {}; },
getCurrentParams: function() {}

to make it work with RouteHandler and State mixins.

@slonoed
Copy link

slonoed commented Feb 2, 2015

Its works, but I receive warnings

Warning: Required context `getCurrentPath` was not specified in `Link`. Check the render method of `TargetScan`.
Warning: Required context `getCurrentRoutes` was not specified in `Link`. Check the render method of `TargetScan`.
Warning: Required context `getCurrentPathname` was not specified in `Link`. Check the render method of `TargetScan`.
Warning: Required context `getCurrentQuery` was not specified in `Link`. Check the render method of `TargetScan`.
Warning: Required context `getCurrentPath` was not specified in `Link`. Check the render method of `TargetScan`.
Warning: Required context `getCurrentRoutes` was not specified in `Link`. Check the render method of `TargetScan`.
Warning: Required context `getCurrentPathname` was not specified in `Link`. Check the render method of `TargetScan`.
Warning: Required context `getCurrentQuery` was not specified in `Link`. Check the render method of `TargetScan`.

Can you suggest what to do?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment