Enzyme: How can I test mapped <Route /> components?

[cyntler]

I have following code...

Component:

import React from "react"
import { Route as RouteComponent } from "react-router-dom"

import type { Route } from "@/types"

export type Props = {
    routes: Array<Route>
}

const Content = ({ routes }: Props) => {
    return routes.map(({ path, component, exact }, i) => {
        return (
            <RouteComponent
                key={i}
                path={path}
                component={component}
                exact={exact}
            />
        )
    })
}

export default Content

Test:

import React from "react"
import { shallow } from "enzyme"
import { Route } from "react-router-dom"

import routes from "@/routes"
import Content from "@/containers/Content"

describe("<Content />", () => {
    it("should be render with routes", () => {
        const component = shallow(<Content routes={routes} />)
                // HOW?
    })
})

How can I check if Content component return greater than 0 Route components?

I try like this: expect(component.find(Route).length).toBeGreaterThan(0)
but this generate error: Expected value to be greater than: 0 Received: 0

Why .find(Route).length returns 0?

Your environment

Parcel Bundler, React, Flow, ESLint, Babel, Jest + Enzyme

API

• [X] shallow
• [ ] mount
• [ ] render

Version

| library | version
| ---------------- | -------
| Enzyme | 3.3.0
| React | 16.3.2

Adapter

• [X] enzyme-adapter-react-16
• [ ] enzyme-adapter-react-15
• [ ] enzyme-adapter-react-15.4
• [ ] enzyme-adapter-react-14
• [ ] enzyme-adapter-react-13
• [ ] enzyme-adapter-react-helper
• [ ] others ( )

[ljharb]

@sintloer did you figure this out?

[cyntler]

@ljharb, when I wrote this issue I didn't know Enzyme well. This is not important anymore. Thanks.

[kevbost]

@sintloer What was your solution? Because I'm facing the same problem, and this thread could help be a solution for a lot of people.

Relevant: https://xkcd.com/979/

[webberwang]

@ljharb, when I wrote this issue I didn't know Enzyme well. This is not important anymore. Thanks.

Would be great if you could share you findings, thanks.

[annaloukianova]

I have a similar problem.

Component:

     <div data-classid="app-routes">
          <ErrorBoundary>
            <Switch>
              {
                  routes.map((child) => {
                    return (
                      <Route key={child.to} path={`${match.path}/${child.to}`} component={child.component} />
                    );
                  })
                }
            </Switch>
          </ErrorBoundary>
        </div>

.debug() output:

  <div data-classid="app-routes">
    <ErrorBoundary>
      <Switch />
    </ErrorBoundary>
  </div>

Any ideas on what to try or how to debug? I have verified that routes are not empty, test has a valid MemoryRouter with initialEntries. I know this is an old, closed issue but this is the only thing that comes up remotely close when searching.

Edit: Yeah - this does work. My problem was that MemoryRouter had the initialRoute set, and the component I am testing needs a match prop passed in as well (since usually it gets match from being rendered by a route higher up, but in the case it doesn't have a parent route since I'm testing it). I must have had a typo or something in the way I was passing the the match prop, even though it looked correct in the test and in the component. Might have also been jest being funky, but anyway I ended up having to set match inline in the component instead of just using a variable, ie:

  const match = {
    params: {
      appId: '54321',
      accountID: '12345',
      view: 'overview',
    },
    path: '/account/12345/apps/54321',
  };
...

    <AppRoutes {
      ...{
+        match: {
+          ...match,
+          path: '/account/123/app/1234',
+          params: {
+             ...match.params,
+             view: 'overview',
+          },
+       },
-        match,
      }
    }
    />

Whatever the underlying issue, whether user error or something not clearing between tests, setting the prop inline is what fixed it for me.

[ljharb]

@annaloukianova that should work fine if you're sure that routes isn't empty in the test. Please file a new issue with full component and test code and I'll take a look.