React-testing-library: How to use with redux-little-router

[granmoe]

• react-testing-library version: 1.10.0
• node version: 8.9.4
• npm (or yarn) version: 5.6.0

Relevant code or config

I used the renderWithRedux util from the redux example:

export default (
  ui,
  {
    initialState,
    store = configureStore(initialState),
  } = {},
) => ({
  // adding `store` to the returned utilities to allow us
  // to reference it in our tests (just try to avoid using
  // this to test implementation details).
  ...render(<Provider store={store}>{ui}</Provider>),
  store,
})

What you did:

(Note: I'm not sure if this issue belongs here or in the redux-little-router repo. Also, I tried looking at the react-router example to get ideas of how to work around this.)

I wrote a test that simulates some actions that modify redux state and then clicks on a link that goes to another route. I would like to then verify that the UI on this page is correct per redux state.

What happened:

The component tree reflects that no routing happened (stays on the same page).

Reproduction repository:

Problem description:

Suggested solution:

[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.

[kentcdodds]

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

[kentcdodds]

Works locally too :)

[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 😄

[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]

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.

[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]

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

[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]

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