React-testing-library: Feature Proposal - include and export renderWithRedux/Router

[sesteva]

When @kentcdodds published an article about doing more integration tests using, we did a POC and right away we spotted a couple of defects in our app.

We put together a small util that would allow us to renderScreen or renderApp. This util saved us from provisioning the store, default state. The redux examples of this project show a very similar method "renderWithRedux".

When we saw this module coming alive we stopped adding any type of feature to our util and started planning to migrate to this module instead.

So we are wondering if this community would consider as part of the scope of this module adding such features:

• renderScreen
• renderApp

Our understanding is that the React/Redux/Router combination is common enough in the react community that a feature like this would cater to a significant audience.

Maybe the particularities of each project make this proposal invalid. Anyway, before preparing a PR we wanted to socialize it.

Thank you for this great and simple solution.

[tsiq-swyx]

i'm not sure i understand. this is a testing library. you seem to be proposing something much bigger, like a "standard React bundle".

[kentcdodds]

Hey @tsiq-swyx, that's not what @sesteva is suggesting. I believe what is being suggested is having a method such as this one included:

https://github.com/kentcdodds/testing-workshop/blob/92c6d4d4de8ee1c351aca8e53010428ad1dd9a0c/client/test/til-client-test-utils.js#L8-L18

This is a great method that every application should have, but every application will need it to be slightly different. This is why I'd much rather have an example in the README of how to create and use something like this. We won't include anything in this library that supports specific libraries especially :) Thanks anyway! Would you like to add a PR for this?

[benpolinsky]

Hey Kent,

I'd be willing to take a crack at this. Should it follow the examples (react-router / react-redux), taking care to note that each app's implementation will vary? Or do you see it as more of a FAQ?

I've also just figured out how to test a redirect using this library, which means I can ditch Enzyme for good. You basically export the new history from within the would-be utility function (such as the one you linked above) and check for the appropriate path/route.

Thanks for the library btw - dare say I'm having fun using it.

[kentcdodds]

Should it follow the examples (react-router / react-redux), taking care to note that each app's implementation will vary? Or do you see it as more of a FAQ?

Because doing this would require custom jest configuration it'd probably be best to just have an example in another repo and point to that. Do you mind making something like that?

I've also just figured out how to test a redirect using this library, which means I can ditch Enzyme for good.

Super! You solution is how I would do that as well :+1:

I'm having fun using it.

That's the BEST thing I've heard all day! Thanks!

[benpolinsky]

Ha!

Nope not at all. I'll do my best to get to it this weekend (famous last words :))

[srlyttle]

@benpolinsky did you ever solve this issue ?, I am having a similar issue testing a component. Many Thanks