유치원 단위 테스트에서 redux 반응 구성 요소로부터 상태 가져 오기

Question

반응 구성 요소를 연결 구성 요소로 만들면 상태를 테스트 할 수없는 것처럼 보입니다. 왜 그런지 알아? 요점을 설명하기 위해, 나는 redux없이 통과하고 당신이 그것을 연결하자마자 실패하는 반응 구성 요소에 대한 테스트를했습니다.

// MyComponent.test.js 
import React from 'react' 
import MyComponent from '../src/components/MyComponent' 
import { mount } from 'enzyme' 

describe('MyComponent',() => { 
    describe('interactions',() => { 
    let wrapper 
    beforeEach(() => { 
     wrapper = shallow(<MyComponent />) 
    }) 

    it('foo to equal bar',() => { 
     expect(wrapper.state().foo).toEqual('bar') 
    }) 
    }) 
}) 

가 지금은 돌아 오는을 소개하고 구성 요소를 연결하고 있습니다 :

// MyComponent.test.js 
import React from 'react' 
import MyComponent from '../src/components/MyComponent' 
import { mount } from 'enzyme' 

import configureStore from 'redux-mock-store' 

describe('MyComponent',() => { 
    const state = {} 
    const mockStore = configureStore() 

    describe('interactions',() => { 
    let wrapper 
    beforeEach(() => { 
     wrapper = mount(<MyComponent store={ mockStore(state) } />) 
    }) 

    it('foo to equal bar',() => { 
     expect(wrapper.state().foo).toEqual('bar') 
    }) 
    }) 
}) 

: 여기

// MyComponent.jsx 

... 

export default connect(function (state){ 
    return { 
    currentUser: state.currentUser 
    } 
})(MyComponent); 

및 업데이트 된 테스트입니다 여기에

// MyComponent.jsx 
import React from 'react' 

class MyComponent extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     foo: 'bar' 
    }; 
    } 

    render() { 
    return <div></div> 
    } 
} 

export default MyComponent 

은 통과 테스트입니다

Answer 1

그 이유는입니다.은 저장소 상호 작용 프로세스를 관리하는 래퍼 구성 요소를 생성합니다. 두 번째 스 니펫에서 <MyComponent>은 원래 구성 요소가 아닌 connect()에 의해 생성 된 구성 요소입니다. 실제 컴포넌트 상태의 내용을 검사하기 위해 렌더 계층 구조에서 더 깊이 중첩되는 레벨을 파 내려야합니다.

Answer 2

connect() (기본 내보내기)과 실제 구성 요소 자체를 내보내는 것이 좋습니다.

이렇게하면 연결된 버전의 구성 요소 외부에서 구성 요소를 개별적으로 테스트 할 수 있습니다.

class MyComponent extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     foo: 'bar' 
    }; 
    } 

    render() { 
    return <div></div> 
    } 
} 

export MyComponent 

export default connect(function (state){ 
    return { 
    currentUser: state.currentUser 
    } 
})(MyComponent); 

다음 테스트 :

import { MyComponent } from '../src/components/MyComponent' 
import { mount } from 'enzyme' 

describe('MyComponent',() => { 
    describe('interactions',() => { 
    let wrapper 
    beforeEach(() => { 
     wrapper = shallow(<MyComponent />) 
    }) 

    it('foo to equal bar',() => { 
     expect(wrapper.state().foo).toEqual('bar') 
    }) 
    }) 
})