-
-
Notifications
You must be signed in to change notification settings - Fork 10.3k
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
Rendering component wrapped in withRouter
throws when no Router is present
#4795
Comments
The testing guide covers the necessity of rendering inside of a I'm not sure if Also, I'm not positive, but is your reference to |
No, it's related to when that existed: Anyway, it'd be better if a component using Hope you reconsider closing this. |
I'll re-open for the time being for the |
There are non-testing applications. Imagine a component that is used in two component trees -- one having a Router and another not. This actually happened in our codebase just moments ago |
I'm not sure I get your reasoning, I like RR4 so far but if it that means I can't test my components I'm going to have to revert to using RR3. I have a component Currently I can't test A because if I don't wrap it the test crashes, and if I wrap it in per example a Maybe there's a better way I haven't thought of though, I checked a bit on both enzyme and RR's repositories and didn't find much but I haven't worked with RR4 for long so :/ |
It makes sense that if you wrap a component in something called |
It would be most convenient if Throwing seems like the least desirable thing. I could see a warning maybe. For any readers: I now export the unwrapped component by name, import that in my test files, and supply my own route prop mock objects. |
Maybe I can phrase it differently: if you're not planning on rendering a component inside a // This makes sense to me.
<Router>
{withRouter(MyComponent)}
</Router>
// This doesn't.
<div>
{withRouter(MyComponent)}
</div> What's preventing you from just not using |
Because that's how my application code uses it.
For shallow rendering a single component: Nothing, that's what I'm doing now to work around this. It requires me to export the unwrapped component and import that in my test, which is a mild inconvenience. Imagine the case where you are, in a unit test, deep rendering your component under test, and it renders somewhere in its descendent tree a component that is wrapped in withRouter. How then should we just not use withRouter in that child? Module-level mock the child to inject an unwrapped component? Gets messy quickly. We ended up inserting a Crux of the issue is that I don't expect |
Perhaps a noop with a warning message would be best? |
That's the way all of our tests work here; they all render a I get that this is really inconvenient for you, but I'm just not sure the best way to fix it. What does redux do if you render one of your |
We fire an invariant, but we have a special case of not requiring a context provider, as we also support the But I think #4939 will cover this if we can get it merged. |
My vote is for if (!router) {
return <WrappedComponent {...this.props} />
} |
Well, #4939 is now merged which is going to yell at people if they try to use any of I'm open to ideas, but I don't like the thought of making |
What's the conclusion for this case mentioned the above:
But all the later discussions are about testing. We are actually experiencing the issue with non-testing application; we have an complete React application with routing and React components which are just a part of pages generated by Rails.
|
If I'm understanding your problem correctly, you need to operate on the root component with enzyme and you'd rather not wrap in a router. We've been mocking out the context on the mount and shallow methods in our tests... Maybe it'll work for you - for sample code you can see here, hope that helps if you're still having the issue :) |
Use react-router-dom mock like this: import React from 'react' // 15.4.2
import renderer from 'react-test-renderer' // 15.4.2
import { withRouter } from 'react-router'
jest.mock('react-router-dom'); // <- Use this line
const Component = () => <div />
const WrappedComponent = withRouter(Component)
it('will render', () => expect(renderer.create(<Component />)).toBeDefined())
it('will fail', () => renderer.create(<WrappedComponent />)) |
Version
4.0.0, 4.0.0-beta.8
Test Case
Steps to reproduce
Run above tests in Jest, or any other test runner.
Expected Behavior
Rendering WrappedComponent with react-test-renderer does not fail.
Actual Behavior
Route.computeMatch (node_modules/react-router/Route.js:66:22) is
Passing
{ withRef: true }
towithRouter
has no effect.This makes it hard to unit test any component that renders as one of its children a component wrapped in
withRouter
.Can be worked-around by inserting a
Router
.Thanks!
possibly related bugfix here #4292
The text was updated successfully, but these errors were encountered: