는 라우터 4 실패 상황에 맞는 유형

Question

내가 연결 한 내-반응 생성 - 애플리케이션에와 npm run test을 실행에 라우터 4 반응 반작용 나는 다음과 같은 오류 얻을 : 나는 react-router@4.2.0을 사용하고

Warning: Failed context type: The context `router` is marked as required in `Switch`, but its value is `undefined`. 
     in Switch (at App.js:17) 
     in main (at App.js:16) 
     in div (at App.js:15) 
     in App (at App.test.js:7) 

을, and react-router-dom@4.2.2

내 <Switch> 구성 요소가 <BrowserRouter> 내에 중첩되어 있는지 확인했습니다.

App.js : 다른

import React, { Component } from 'react'; 
import { Switch, Route, withRouter, Router } from 'react-router-dom'; 
import './App.css'; 

// Components 
import Header from '../../components/header/Header'; 
import Nav from '../../components/nav/Nav'; 
import Dashboard from './../../containers/dashboard/Dashboard'; 
import Events from './../../containers/events/Events'; 
import NotFound from './../../containers/notfound/NotFound'; 

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <Header /> 
     <Nav /> 
      <main id="main"> 
       <Switch context="router"> 
        <Route path="/" exact component={Dashboard} /> 
        <Route path="/events" exact component={Events} /> 
        <Route path="*" component={NotFound} /> 
       </Switch> 
      </main> 
      </div> 
    ); 
    } 
} 

export default App; 

을 내하는 index.js

import ReactDOM from 'react-dom'; 
import React from 'react'; 
import { BrowserRouter } from 'react-router-dom'; 
import { Provider } from 'react-redux'; 
import Store from './store'; 
import App from './containers/app/App'; 

import './index.css'; 

const StoreInstance = Store(); 

ReactDOM.render(
<Provider store={StoreInstance}> 
    <BrowserRouter> 
    <App /> 
    </BrowserRouter> 
</Provider>, 
document.getElementById('root') 
); 

누구나이 건너?

Answer 1

이것은 React Create App의 기본 테스트 예입니다.

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 

it('renders without crashing',() => { 
    const div = document.createElement('div'); 
    ReactDOM.render(<App />, div); 
}); 

라우터 컨텍스트는 'index.js'파일에 제공되며 테스트를 실행할 때 존재하지 않습니다.

당신은 그것을 다음의 방법으로 재 작성해야합니다

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {BrowserRouter} from 'react-router-dom'; 
import App from './App'; 


it('renders without crashing',() => { 
    const div = document.createElement('div'); 

    const StoreInstance = Store(); 

    ReactDOM.render(
    <Provider store={StoreInstance}> 
     <BrowserRouter> 
      <App /> 
     </BrowserRouter> 
    </Provider>, 
    div 
); 
}); 

또는 이동 '제공'및 응용 프로그램 '구성 요소'에 BrowserRouter을 '.