React Router Invariant Violation test fails with outside

Question

I am using create-react-app with react router and i keep getting failed test errors when i run npm test. The links work fine however it fails the test. I get the error code Invariant Violation: You should not use Link outside a Router.

So i wrapped the code block with a Router and it passed the test. However the links no longer function.

How do i get the links to work and the app to pass the test at the same time?

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Link } from 'react-router-dom';

const App = () => {
return (
//<Router>
  <div className="App">
    <div className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <h2>Welcome to React</h2>
      <p>This is the App page</p>
    </div>
    <p className="App-intro">
      To get started, edit <code>src/App.js</code> and save to reload.
    </p>
    <ul>
    <li><Link to="/">Home</Link></li>
    <li><Link to="/app">App</Link></li>
  </ul>
  </div>
//</Router>
   );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Home from './Home';
import NoMatch from './NoMatch';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter as Router, Route, Switch } from 'react-router-  dom';

const Root = () => {
return(
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/app" component={App} />
<Route component={NoMatch}/>
</Switch>
</Router>
) 
}

ReactDOM.render(<Root />, document.getElementById('root'));
registerServiceWorker();