Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add warning to link.js #3572

Merged
merged 4 commits into from
Jun 24, 2016
Merged

Add warning to link.js #3572

merged 4 commits into from
Jun 24, 2016

Conversation

lucasgodshalk
Copy link
Contributor

I foolishly moved my Link component outside of the Router. I managed to figure it out pretty quickly but the error wasn't terribly helpful. See #3225. Thoughts?

@lucasgodshalk
Copy link
Contributor Author

Would it be better to place this warning in the render method?

@@ -98,7 +98,9 @@ const Link = React.createClass({
if (allowTransition) {
const { to, query, hash, state } = this.props
const location = createLocationDescriptor(to, { query, hash, state })


warning(this.context.router != undefined, 'No router context, are you sure your link is inside a valid Router component?')
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Move this to the top of onClick and make it an invariant, something like

invariant(
  this.context.router,
  '<Link>s rendered outside of a router context cannot handle clicks.'
)

@taion
Copy link
Contributor

taion commented Jun 23, 2016

Not in render because it would spam tests.

@@ -98,7 +104,7 @@ const Link = React.createClass({
if (allowTransition) {
const { to, query, hash, state } = this.props
const location = createLocationDescriptor(to, { query, hash, state })

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove trailing whitespace here

@taion
Copy link
Contributor

taion commented Jun 23, 2016

LGTM aside from that whitespace nit.

@lucasgodshalk
Copy link
Contributor Author

Done.

@taion
Copy link
Contributor

taion commented Jun 23, 2016

Thanks.

@@ -73,6 +74,11 @@ const Link = React.createClass({
},

handleClick(event) {
invariant(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would move this to a lifecycle hook (probably componentWillMount) so developers can be alerted to mis-use earlier. I could see a Link not getting clicked on in testing and then going to production broken.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can't – the idea is that for unit tests, we let the link be rendered without a router, so that people can test non-navigation-related aspects of their page components that use <Link>s without having to set up a router context.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a code flag for unit tests?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's NODE_ENV, but it's uncommon for people to set it.

@taion
Copy link
Contributor

taion commented Jun 24, 2016

What do we think here? I think putting the invariant in onClick lets us give users a helpful warning when they try to use a <Link> outside the router context. I don't think we can make them not render outside the router context, though.

@timdorr
Copy link
Member

timdorr commented Jun 24, 2016

Well, given the problems with putting it on a normal lifecycle method, I guess that's out. I suppose having it on the click handler is better than nothing, but it still feels like we're not going to catch as many problems as we could.

@timdorr timdorr merged commit bac81f3 into remix-run:master Jun 24, 2016
@taion
Copy link
Contributor

taion commented Jun 24, 2016

A while ago I suggested we should make router object required unless NODE_ENV === 'testing'. But nobody uses NODE_ENV === 'testing'. I mean... do you?

@taion
Copy link
Contributor

taion commented Jun 24, 2016

Actually, that would be sort of counterproductive, since it means there'd be bugs in production that wouldn't get caught by tests. I dunno – it's hard.

@timdorr
Copy link
Member

timdorr commented Jun 24, 2016

Yeah, unfortunately this isn't Rails where RAILS_ENV is de facto standard. And worse still, NODE_ENV doesn't exist in the browser context, so headless browser testing would break all of that anyways.

@taion
Copy link
Contributor

taion commented Jun 24, 2016

Released with #3571 as v2.5.1.

@jebeck
Copy link

jebeck commented Jul 7, 2016

Any suggestions for unit testing now? I was using sinon to spy on onClick functions and simulating clicks with Enzyme. The use case is a bit odd perhaps - passing in an onClick function and want to prove that the click function is called/not called depending on whether a hidden bool passed in is true or false (this is on a slide-out nav panel for use on mobile). I can catch the errors to not have them fail the tests, but they obscure my spying on the onClick...

@lucasgodshalk
Copy link
Contributor Author

I could move the warning down to below where we call an external onClick. When you have your own onClick, the Link doesn't requires access to the router context.

@taion
Copy link
Contributor

taion commented Jul 7, 2016

Only if you preventDefault...

Can you just inject a fake router context? And can you open an issue for this?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants