Redux를 ReactJS 앱에 추가 한 후에이 깨진 단위 테스트를 어떻게 해결할 수 있습니까?

Question

내 응용 프로그램은 잘 실행하고 여기에 주요 파일 : 나는 원래 사용

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 
import App from './App'; 
import store from '../src/store/store'; 

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

은 여기로 내 프로젝트를 만들 수있는 응용 프로그램을 만드는 반응 : https://github.com/facebookincubator/create-react-app 을하고 나는 내 응용 프로그램에 돌아 오는을 추가했다.

상태 관리를 위해 앱에 Redux를 추가 한 후 원래 단위 테스트가 중단되었습니다. 여기

테스트입니다 :

가 어떻게 그것을 통과하도록 단위 테스트를 해결할 수

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); 
}); 

?

Answer 1

오류에 대해 자세히 설명하지는 않았지만 connected 구성 요소에 대한 상점이 없다고 가정합니다.

redux-mock-store과 같은 것을 사용하여 예상 상태를 만든 다음 기본 파일에서와 마찬가지로 App을 Provider에 넣을 수 있습니다. 같은 뭔가

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 
import configureStore from 'redux-mock-store' 
import App from './App'; 

const middlewares = [] 
const mockStore = configureStore(middlewares) 

it('renders without crashing',() => { 

    const initialState = { /*expected state goes here */ } 
    const store = mockStore(initialState) 

    const div = document.createElement('div'); 
    ReactDOM.render(<Provider store={store}><App /></Provider>, div); 
}); 

참고 : 나는 또한 단지이 테스트는 지금 당신에게 도움이 될 수 있지만 더 복잡한 앱이 얻을 수 있음을 경고 할는 어려워 점점 더 많은 상태로 유지하는 것 렌더링이 필요합니다. enzyme과 같은 도구를 살펴보고 개별 구성 요소의 얕은 렌더링을 사용하여 대신 앱을 테스트 할 수 있습니다.

Answer 2

Redux를 앱에 추가 할 때 모의 스토어를 사용하여 테스트 할 때 앱을 초기화해야합니다. 마이클이 말한 것과 똑같습니다.