연결된 구성 요소에 대한 js 단위 테스트 반응

Question

단위 테스트 (DOM 테스트)를 작성하려고하는 스마트 구성 요소가 있습니다. 다음 오류가 발생합니다. 테스트에서 소품을 전달하고 있는데 왜이 오류가 발생하는지 잘 모르겠습니다. ..?

Invariant Violation: Could not find "store" in either the context or props of "Connect(myComponent)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(myComponent)".

업데이트 새로운 오류 : 형식 오류 : mapStateToProps에서 정의되지 않은 재산 'mainData'을 읽을 수 없습니다

테스트 코드 :이를 myComponent 바보 같은 구성 요소의 자식

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import TestUtils from 'react-addons-test-utils'; 
import { Provider } from 'react-redux'; 
import configureMockStore from 'redux-mock-store'; 
import { renderComponent, expect } from '../../test_helper'; 
import myComponent from '../../../src/containers/myComponent'; 


describe('myComponent',() => { 
    const mockStore = configureMockStore(); 
    let connectedApp, 
    store, 
    initialItems; 
    let component; 
    let componentRender; 

    beforeEach(() => { 
    const DataMock = [1, 2, 0, 0, 0, 0, 0, 1, 2, 0, 0, 0, 0, 
     0, 1, 2, 0, 0, 0, 0, 0, 1, 2, 0, 0, 0, 0, 0, 1, 
     2, 0, 0, 0, 0, 0]; 

    const props = { 
     mainData: DataMock, 
     abc: 'def', 
     subData: { 
     test: '1', 
     testing: 12, 
     }, 
     userID: '1', 
     Date: 'jan11', 
    }; 

    initialItems = ['one']; 
    const initialState = { 
     items: initialItems 
    }; 

    store = mockStore(initialState); 

    component = TestUtils.renderIntoDocument(
     <Provider store={store}><myComponent {...props} /></Provider>); 

    componentRender = ReactDOM.findDOMNode(component); 
    }); 

    it('loads',() => { 
    expect(component).to.exist; 
    }); 
}); 

myComponent code :

import React, { PropTypes, Component } from 'react'; 
import { connect } from 'react-redux'; 
import * as actions from '../../actions/component_actions'; 

class myComponent extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     someString: 'abc', 
     someotherstring: 'def', 
    }; 
    } 

    componentDidMount() { 
    const { test1, test2, test3 } = this.props; 
    this.props.fetchEntriesDefault(test1, test2, test3); 
    this.props.fetchAnalyticsMainView(test1, test2, test3); 
    } 

render() { 
    return (
     <div className="container"> 
    </div> 
    ); 
    } 
} 


    function mapStateToProps(state) { 
     return { 
     mainData: state.reducerName.mainData, 
     subDataData: state.reducerName.subDataData, 
     }; 
    } 
    myComponent.propTypes = { 
     mainData: PropTypes.array, 
     abc: PropTypes.string, 
     subDataData: PropTypes.object, 
     userID: PropTypes.string, 
     actioncreatorfuncone: PropTypes.func, 
     actioncreatorfunctwo: PropTypes.func, 
     date: PropTypes.string, 
    }; 

    export default connect(mapStateToProps, actions)(myComponent); 

Answer 1

MyComponent이 connect (redux)을 사용하여 저장소에 연결되어 있음을 명확히 설명합니다. 따라서 사용할 때 TestUtils.renderIntoDocument(<myComponent {...props} />);

구성 요소는 redux를 사용하여 제공해야하는 저장소를 가져옵니다. 연결된 구성 요소가 감속기를 수신하려면 테스트 저장소를 만들어야합니다.

예 :이 방법으로

import React from 'react'; 
import ReactDOM from 'react-dom'; 

// IMPORTANT 
import { Provider } from 'react-redux'; 
import configureMockStore from 'redux-mock-store'; 

import TestUtils from 'react-addons-test-utils'; 
import { renderComponent, expect } from '../../test_helper'; 
import MyComponent from '../../../src/containers/myComponent';  

describe('myComponent',() => { 
    var mockStore = configureMockStore(); 
    var connectedApp, store, initialItems; 
    let component; 
    let componentRender; 

    beforeEach(() => { 
    const DataMock = [1, 2, 0, 0, 0, 0, 0, 1, 2, 0, 0, 
     0, 0, 0, 1, 2, 0, 0, 0, 0, 0, 1, 2, 0, 0, 0, 0, 
     0, 1, 2, 0, 0, 0, 0, 0 
    ]; 

    const initialState = { 
     mainData: DataMock, 
     userID: '1' 
    }; 

    store = mockStore(initialState); 
    }); 

    describe('state provided by the store', function() { 
    beforeEach(function() { 

     component = TestUtils.renderIntoDocument(
     <Provider store={store}><MyComponent /></Provider>); 

     componentRender = ReactDOM.findDOMNode(component); 
    }); 

    it('loads',() => { 
     expect(component).to.exist; 
    }); 
    }); 
}); 

, 당신은 REDUX와 연결된 구성 요소의 저장소와 공급자를 추가해야합니다.

업데이트 Actions may not have an undefined "type" property 인해 myComponent의 연결 방법은 작업을 못하고있다, 사실입니다. myComponent에 대한 전체 코드를 올리시겠습니까? 추가해야 할 작업은 무엇입니까? 작업은해야 사전과 같은 :이 예와 같이

뭔가 : 나는 다음과 같이 단지 테스트를 위해 별도로 구성 요소를 수출하고있는 중이 방식의

import { connect } from 'react-redux' 
import { login } from '../actions/creators/userActionCreators' 

function mapStateToProps(state) { 
    return { 
    mainData: state.reducerName.mainData, 
    subDataData: state.reducerName.subDataData, 
    }; 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
     onSubmitLogin: (id, pass) => dispatch(login(id, pass)) 
    } 
}; 

// `LoginForm` is being passed, so it would be the "container" 
// component in this scenario 
export default connect(mapStateToProps, mapDispatchToProps)(myComponent); 

Answer 2

하나.

export class MyComponent extends Component { 
    // your stuff here 
} 

export default connect(mapStateToProps, actions)(MyComponent); 

는 여기에서 우리는 참고

import { MyComponent } from '../../../src/containers/myComponent'; 

로 테스트를 위해 REDUX 래퍼없이 Testing Redux Component

주 구성 요소를 가져옵니다 : 우리는 구성 요소에 필요한 소품을 통과해야합니다.