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
v4 link test #4227
Comments
Can you include the code for your test? I'm not sure what you need to be testing a |
Of course, sorry. Here's a very simplified example.
It's just a smoke test to make sure that a component can render, but I find them very useful. |
In the unit tests a |
I'll give that a shot! Thanks for the lightning-fast response time. |
Did the trick, thanks a lot :) |
|
@pshrmn, I think I'm confused as to how this scales. Do we have to wrap every component that renders—either directly or indirectly— |
@indiesquidge That's been my experience. I ended up making a wrapper that I just reuse whenever I'm rendering router components, something like:
If you're using something like Redux you can even set up a store/provider for testing at this point. |
So this means shallow rendering in tests is out as long as you're using a import React from 'react';
import * as Enzyme from 'enzyme';
import { MemoryRouter } from 'react-router-dom';
export const shallow = component => Enzyme.shallow(
<MemoryRouter>
{component}
</MemoryRouter>
); That results in this failing: import React from 'react';
import { Link } from 'react-router-dom';
import { shallow } from 'test-utils/enzyme';
const Component = () => <Link to="foo" />;
it('should render the with a <Link />', () => {
const wrapper = shallow(<Component />);
console.log('wrapper.debug()', wrapper.debug());
// <Router history={{...}}>
// <Component />
// </Router>
const link = wrapper.find('Link');
expect(link).toBePresent();
// Expected "[empty set].toBePresent()" results to contain at least one node, instead found none.
}); |
@esphen In my experience yes, you do have to do a full mount 😞 |
The reason for doing tests inside of a If you are using something like Enzyme, you can provide an I wanted to experiment with Enzyme in my You can see its usage here: It seemed to work well for me, but I still had to use |
Hi @pshrmn, nice to hear there is a workaround. I'll try it out tomorrow. I'm interested to hear, though: How do you feel about React Router falling back to rendering a placeholder if For example: let href;
if (this.context.router) {
href = this.context.router.history.createHref(
typeof to === 'string' ? { pathname: to } : to
);
} else {
href = (to && to.pathname) || to;
} |
Just published I think that in most cases, rendering inside of a That said, I think that in some situations this could be useful to setup an exact context object without having to render a number of @esphen I think that at some point (I don't remember if it was v2/3 or v4 alpha), something along those lines was included. The conclusion was that it didn't make sense to include because the |
Awesome, well done! That was super quick 😄 Just one more point before I leave this issue: I'd be okay with As it is now React Router keeps pressing the issue by having to pass context on every shallow render and wrapping every other component in It would be great for me as a developer, and you as a maintainer to make it "just work". Less confusion is generally a good thing, no? |
I agree with @esphen, there should be some silently degraded version of the link when testing. Is there any more worke being done in this? |
Using v4.0.0-alpha.6
Shallow rendering tests (run by jest) using
Link
are failing after alpha 5:Any advice on how to work around this?
The text was updated successfully, but these errors were encountered: