title: How to create unit test for URL params for React Router using Enzyme
body: <p>I am trying to put url params under test using Enzyme of React Router. The application is simple so far. I have App.jsx that has a <code>&lt;Router /&gt;</code> component with a <code>&lt;Switch /&gt;</code> component and two <code>&lt;Route /&gt;</code> components. </p>
  
  <p>Any help would be appreciated in setting up a test to take a URL as <code>path</code> from <code>&lt;Route /&gt;</code> and return a value for the path stub in a child <code>&lt;Files /&gt;</code> component.</p>
  
  <p>I am completely new to testing, so please link docs, if you have them, and please pseudo-code or demonstrate an overview of your approach so that I can put it into proper context.</p>
  
  <p>I have not seen any adequate or contextualized methods for testing the URL param functionality that suit my level of understanding. There was an answer here that suggests mocking with Jest, <a href="https://stackoverflow.com/questions/58117890/how-to-test-components-using-new-react-router-hooks">How to test components using new react router hooks?</a> but there is not enough context for me to implement.</p>
  
  <p>This is a basic standup of create-react-app:</p>
  
  <pre><code>function App() {
    const [user] = useState(sampleUser);
  
    return (
      &lt;UserContext.Provider value={user}&gt;
        &lt;SiteHeader /&gt;
        &lt;Router&gt;
          &lt;Switch&gt;
            &lt;Route path="/files/:fileId"&gt;
              &lt;Files /&gt;
            &lt;/Route&gt;
            &lt;Route path="*"&gt;
              &lt;header className="App-header"&gt;
                &lt;img src={logo} className="App-logo" alt="logo" /&gt;
                &lt;p&gt;
                  Edit
                  &lt;code&gt;src/App.js&lt;/code&gt;
                  and save to reload.
                &lt;/p&gt;
                &lt;a
                  className="App-link"
                  href="https://reactjs.org"
                  target="_blank"
                  rel="noopener noreferrer"
                &gt;
                  Learn React
                &lt;/a&gt;
              &lt;/header&gt;
            &lt;/Route&gt;
          &lt;/Switch&gt;
        &lt;/Router&gt;
      &lt;/UserContext.Provider&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>I am interested in testing <code>&lt;Files /&gt;</code> in isolation, and passing in a URL. <code>&lt;Files /&gt;</code> destructures <code>fileId</code> from the <code>useParams</code> hook.</p>
  
  <p>The component for Files looks like this:</p>
  
  <pre><code>import React from 'react';
  // import PropTypes from 'prop-types';
  import { useParams, Router } from 'react-router-dom';
  
  const Files = () =&gt; {
    const { fileId } = useParams();
    return (
      &lt;main&gt;
        {`component for ${fileId}`}
      &lt;/main&gt;
    );
  };
  
  Files.propTypes = {};
  
  Files.defaultProps = {};
  
  export default Files;
  </code></pre>
  
  <p>For my test, I am importing Files and Route, since Files inherits the <code>path</code> of Route using the <code>useParams</code> hook. I am mounting <code>&lt;Route path="/files/:fileId" component={Files} /&gt;</code>, and I am wrapping that with <code>&lt;MemoryRouter initialEntries={['/files/mockId']} initialIndex={0}&gt;</code> to get state. the full code looks like this:</p>
  
  <pre><code>import React from 'react';
  import { mount, shallow, configure, render } from 'enzyme';
  import Adapter from 'enzyme-adapter-react-16';
  import { MemoryRouter, matchPath, useParams } from 'react-router-dom';
  import Files from './Files.jsx';
  import Route from '../../App.jsx';
  
  configure({ adapter: new Adapter() });
  
  describe('FilesPage', () =&gt; {
  
    it('has fileId of `mockId`', () =&gt; {
      const wrapper = mount(
        &lt;MemoryRouter initialEntries={['/page-tagger/mockId']} initialIndex={0}&gt;
          &lt;Route path="/page-tagger/:fileId" component={Files} /&gt;
          // &lt;Files /&gt;
        &lt;/MemoryRouter&gt;
      );
  
      // Get value fileId from &lt;Files /&gt;
    });
  });
  </code></pre>
  
  <p>I have tried many different approaches to get any value from the <code>&lt;Files /&gt;</code> component, but to no avail. I have tried a <code>shallow(&lt;Files /&gt;)</code>, but that leads to an error that <code>useParams</code> is undefined in the Files.jsx document. So, I mounted and used <code>&lt;MemoryRouter /&gt;</code>. When I see what the wrapper.props() looks like, I can see that <code>&lt;Route /&gt;</code> has the props().children element for App has the path, and that the hook <code>useParam</code> is not a prop or anything for <code>&lt;Files /&gt;</code>. The url in <code>&lt;MemoryRouter /&gt;</code> does not get passed down to children <code>&lt;Route /&gt;</code> nor <code>&lt;Files /&gt;</code>.</p>