How to use with redux-little-router about react-testing-library

[granmoe]

So the mistake I was making is obvious in hindsight but was hard to spot. I was mounting a subset of my app that is normally (outside of tests) wrapped in a parent route. So when I mapped through those components/routes in the test, they weren't wrapped in their parent route and so their routes never matched any href from any of the <Link>s. Once I realized that and mounted the top-level component with the parent routes (<Fragment>s), the rest of the process was easy. Turns out, I also needed to set the jest testURL for jsdom (otherwise it blows up when you try to push a route while on "about:blank").

Thank you for offering encouragement, by the way! I admire people who can behave that way in a context where it's far easier to be apathetic or annoyed 😄

[kentcdodds]

You can actually turn a codesandbox into a local project :)

[kentcdodds]

Works locally too :)

[kentcdodds]

Oh, yes, you definitely need jsdom for this library to work. If you're using Jest, you'll need to set the testEnvironment to jest-environment-jsdom.

I'm guessing that's the issue. Feel free to continue asking questions and folks can help when and where they can. But that's probably the problem. Good luck.

[granmoe]

Well, I'm at a loss. I updated the codesandbox to reflect this scenario and it works in the browser and locally. I'm going to try to strip down my failing example and discover what the problem is. Sorry for all the noise on this issue.

[kentcdodds]

I'm glad you worked it out! If you'd like to add an example to the tests that'd be welcome!

[kentcdodds]

Any chance you could try to reproduce this in a codesandbox like this one? Then we could probably help you better.

[granmoe]

No problem, I created one here. Sorry my initial issue was a little scant on details--I wasn't sure if this was the right repo to create it in.

I had been thinking that this may be due to running in node vs the browser before submitting the issue, and now I see that it works in codesandbox, which I think confirms those suspicions (it just bundles the code using its crazy magic and then executes that in the browser, right?). I'm going to make a standalone project out of that sandbox, and then I'll share it here.

[granmoe]

What! This makes no sense.

So now I'm wondering what the difference is between running tests via react-tests and running them in my project using jest.

I see this in the test script from the codesandbox project: "test": "react-scripts test --env=jsdom". I wonder if jsdom is what's making it work?

[granmoe]

On a sidenote, I'm once again blown away by how awesome codesandbox is 😄

[granmoe]

Thanks for your help so far! I tried your suggestion, and I still get issues, but I got closer to what the actual issue is. I'll need to revise my codesandbox and possibly re-open this if that's OK. The problem only happens if I return <Fragment>s from a function within the render of a component. Here's a snippet of the kind of code that fails:

      {pages.map(({ route, Component }) =>  (
          <Fragment key={route} forRoute={route}>
            <Component />
          </Fragment>
      ))}

Each item in pages is an object that just has a string ('route') and a component ('component'). Each one of those components is a connected component.

I'm going to make a new codesandbox and see if I can repro this now that I know more about the scenario that causes it.

[kentcdodds]

No worries. Keep at it. You can do it!