title: Testing of Nested React components using React-Test-Renderer
body: <p>I have a pure React-Redux application and it is working as expected.</p>
  
  <p>The <strong>App.js</strong></p>
  
  <pre><code>import React, { useEffect } from "react";
  import { useDispatch } from "react-redux";
  import { Router, Route, Switch, Redirect } from "react-router-dom";
  
  import history from "../history";
  import LandingPage from "./home/LandingPage";
  import { displayModules } from "../actions";
  import Cart from "./home/Cart";
  
  const App = () =&gt; {
    const dispatch = useDispatch();
    useEffect(() =&gt; {
      dispatch(displayModules());
    }, [dispatch]);
  
    return (
      &lt;Router history={history}&gt;
        &lt;Switch&gt;
          &lt;Route path="/" exact component={LandingPage}&gt;&lt;/Route&gt;
          &lt;Route path="/cart" exact component={Cart}&gt;&lt;/Route&gt;
          &lt;Route render={() =&gt; &lt;Redirect to="/" /&gt;} /&gt;
        &lt;/Switch&gt;
      &lt;/Router&gt;
    );
  };
  
  export default App;
  </code></pre>
  
  <p>The <strong>LandingPage</strong> has a nested component called Tile.</p>
  
  <pre><code>import React from "react";
  import { useSelector, useDispatch } from "react-redux";
  import Tile from "../common/Tile";
  
  import { addItemToCart, displayCartContents } from "../../actions";
  import "./LandingPage.css";
  
  const LandingPage = () =&gt; {
    const modules = useSelector(state =&gt; state.data.modules);
    const cart = useSelector(state =&gt; state.data.cart);
    const dispatch = useDispatch();
    const addToCart = item =&gt; {
      dispatch(addItemToCart(item));
    };
    return (
      &lt;div className="app"&gt;
        &lt;div className="header"&gt;
          &lt;div className="text"&gt;Insurance modules&lt;/div&gt;
          &lt;i
            className="shopping cart icon"
            onClick={() =&gt; {
              dispatch(displayCartContents());
            }}
          &gt;
            &lt;span className="badge"&gt;{cart.length}&lt;/span&gt;
          &lt;/i&gt;
        &lt;/div&gt;
        &lt;div className="body"&gt;
          {modules.map(module =&gt; (
            &lt;Tile key={module.id} module={module} addToCart={addToCart}&gt;&lt;/Tile&gt;
          ))}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default LandingPage;
  </code></pre>
  
  <p><strong>Tile.js</strong> has a button which I want to test.</p>
  
  <pre><code>import React, { useState } from "react";
  
  import "./Tile.css";
  
  const Tile = props =&gt; {
    const { module, addToCart } = props;
    const [coverage, setCoverage] = useState(parseInt(module.coverageMax - module.coverageMin) / 2);
    const [price, setPrice] = useState((coverage * module.risk) / 100);
    return (
      &lt;div className="tile"&gt;
        &lt;div className="tile-description"&gt;
          &lt;div&gt;
            &lt;i className={`${module.icon} icon`}&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;div className="tile-name"&gt;{module.name}&lt;/div&gt;
          &lt;div className="tile-risk"&gt;Risk(%): {module.risk}&lt;/div&gt;
        &lt;/div&gt;
        &lt;div className="tile-footer"&gt;
          &lt;div className="tile-range"&gt;
            &lt;div className="field-label"&gt;
              Select Coverage: &lt;span className="coverage-display"&gt;{coverage}&lt;/span&gt;
            &lt;/div&gt;
            &lt;div className="slidecontainer"&gt;
              &lt;span className="slider-step"&gt;{module.coverageMin}&lt;/span&gt;
              &lt;input
                type="range"
                min={module.coverageMin}
                max={module.coverageMax}
                value={coverage}
                className="slider"
                onChange={e =&gt; {
                  setCoverage(e.target.value);
                  setPrice((e.target.value * module.risk) / 100);
                }}
              &gt;&lt;/input&gt;
              &lt;span className="slider-step"&gt;{module.coverageMax}&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
            PRICE at this Coverage:&lt;span className="tile-price"&gt;{price}&lt;/span&gt;
          &lt;/div&gt;
  
          &lt;button
            className="tile-button"
            onClick={() =&gt; {
              addToCart({
                id: module.id,
                name: module.name,
                coverage: coverage,
                price: price,
                timeStamp: Math.ceil(new Date().getTime() * Math.random() * Math.random())
              });
            }}
          &gt;
            Add module to cart
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Tile;
  </code></pre>
  
  <p><strong>App.test.js</strong> works fine and I am able to find the nested Landing Page div by className prop.</p>
  
  <pre><code>import React from "react";
  import configureStore from "redux-mock-store";
  import { Provider } from "react-redux";
  import renderer from "react-test-renderer";
  
  import App from "../components/App";
  import history from "../history";
  import { displayModules } from "../actions";
  import { DISPLAY_MODULES } from "../actions/types";
  
  const mockStore = configureStore([]);
  
  describe("App Component test", () =&gt; {
    let store = {};
    let wrappedComponent = {};
    const expectedActions = {
      type: DISPLAY_MODULES,
      payload: [
        {
          id: 0,
          icon: "bicycle",
          name: "Bike",
          coverageMin: 0,
          coverageMax: 3000,
          risk: 30
        },
        {
          id: 1,
          icon: "gem",
          name: "Jewelry",
          coverageMin: 500,
          coverageMax: 10000,
          risk: 5
        },
        {
          id: 2,
          icon: "microchip",
          name: "Electronics",
          coverageMin: 500,
          coverageMax: 6000,
          risk: 35
        },
        {
          id: 3,
          icon: "football ball",
          name: "Sports Equipment",
          coverageMin: 0,
          coverageMax: 20000,
          risk: 30
        }
      ]
    };
    beforeEach(() =&gt; {
      store = mockStore({
        data: {
          modules: [],
          cart: [],
          total: 0
        }
      });
      store.dispatch = jest.fn(displayModules);
      wrappedComponent = renderer.create(
        &lt;Provider store={store}&gt;
          &lt;App /&gt;
        &lt;/Provider&gt;
      );
    });
  
    it("should render with given state from Redux store", () =&gt; {
      expect(wrappedComponent.toJSON()).toMatchSnapshot();
    });
    it("should have an app from Landing Page", () =&gt; {
      expect(wrappedComponent.root.findByProps({ className: "app" })).toBeDefined();
    });
  
    it("should show landing page for default route", () =&gt; {
      *debugger;
      expect(wrappedComponent.root.findByProps({ className: "shopping cart icon" })).toBeDefined();*
    });
    it("should show cart page for /cart route", () =&gt; {
      history.push("/cart");
      expect(wrappedComponent.root.findByProps({ className: "backward icon" })).toBeDefined();
    });
    it("should redirect to landing page for unmatched 404 routes", () =&gt; {
      history.push("/someRandomRoute");
      expect(wrappedComponent.root.findByProps({ className: "shopping cart icon" })).toBeDefined();
    });
    it("should dispatch displayModules action on app mount", async () =&gt; {
      const actualAction = await store.dispatch();
      expect(actualAction).toEqual(expectedActions);
    });
  });
  </code></pre>
  
  <p>But If you see the test debugger
  <a href="https://i.stack.imgur.com/YdW3P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YdW3P.png" alt="enter image description here"></a></p>
  
  <p>The children of div with <strong>className: body</strong> has no children.
  That is why it is not able to find the Tile component.
  Can you suggest why the children are null for the body?
  I have seen this before, even i tried with Enzyme i faced this issue.
  Since it is a Redux wrapped component the , i cant directly create the Landing page or Tile component for testing.
  How to test the nested items?</p>