रेडक्स: एक कनेक्टेड घटक का परीक्षण कैसे करें?

Question

मैं अपने प्रतिक्रिया घटकों का परीक्षण करने के लिए Enzyme का उपयोग कर रहा हूं। मैं समझता हूं कि कच्चे अनकनेक्टेड घटक का परीक्षण करने के लिए मुझे इसे निर्यात करना होगा और इसका परीक्षण करना होगा (मैंने यह किया है)। मैंने कनेक्टेड घटक के लिए एक परीक्षण लिखने में कामयाब रहा है, लेकिन मुझे सच में यकीन नहीं है कि यह सही तरीका है और मैं वास्तव में जुड़े घटक के लिए परीक्षण करना चाहता हूं।

Container.jsx

import {connect} from 'react-redux'; 
import Login from './Login.jsx'; 
import * as loginActions from './login.actions'; 

const mapStateToProps = state => ({ 
    auth: state.auth 
}); 
const mapDispatchToProps = dispatch => ({ 
    loginUser: credentials => dispatch(loginActions.loginUser(credentials)) 

}); 
export default connect(mapStateToProps, mapDispatchToProps)(Login); 

Container.test.js

import React from 'react'; 
import {Provider} from 'react-redux'; 
import {mount, shallow} from 'enzyme'; 
import {expect} from 'chai'; 
import LoginContainer from '../../src/login/login.container'; 
import Login from '../../src/login/Login'; 


describe('Container Login',() => { 
    it('should render the container component',() => { 
    const storeFake = state => ({ 
     default:() => { 
     }, 
     subscribe:() => { 
     }, 
     dispatch:() => { 
     }, 
     getState:() => ({ ...state }) 
    }); 
    const store = storeFake({ 
     auth: { 
     sport: 'BASKETBALL' 
     } 
    }); 

    const wrapper = mount(
     <Provider store={store}> 
     <LoginContainer /> 
     </Provider> 
    ); 

    expect(wrapper.find(LoginContainer).length).to.equal(1); 
    const container = wrapper.find(LoginContainer); 
    expect(container.find(Login).length).to.equal(1); 
    expect(container.find(Login).props().auth).to.eql({ sport: 'BASKETBALL' }); 
    }); 
}); 

Answer 1

यह एक दिलचस्प सवाल है।

मैं आमतौर पर परीक्षण करने के लिए दोनों कंटेनर और घटक आयात करता हूं। कंटेनर परीक्षण के लिए मैं उपयोग करता हूं, redux-mock-store। घटक परीक्षण async कार्यों का परीक्षण करने के लिए है। उदाहरण के लिए, आपके मामले में, लॉगिन प्रक्रिया sinon स्टब्स का उपयोग करके एक async फ़ंक्शन है। यहां एक स्निपेट है,

import React from 'react'; 
import {Provider} from 'react-redux'; 
import {mount, shallow} from 'enzyme'; 
import {expect} from 'chai'; 
import LoginContainer from '../../src/login/login.container'; 
import Login from '../../src/login/Login'; 
import configureMockStore from 'redux-mock-store'; 
import thunk from 'redux-thunk'; 
import { stub } from 'sinon'; 

const mockStore = configureMockStore([thunk]); 

describe('Container Login',() => { 
    let store; 
    beforeEach(() => { 
    store = mockStore({ 
     auth: { 
     sport: 'BASKETBALL', 
     }, 
    }); 
    }); 
    it('should render the container component',() => { 
    const wrapper = mount(
     <Provider store={store}> 
     <LoginContainer /> 
     </Provider> 
    ); 

    expect(wrapper.find(LoginContainer).length).to.equal(1); 
    const container = wrapper.find(LoginContainer); 
    expect(container.find(Login).length).to.equal(1); 
    expect(container.find(Login).props().auth).to.eql({ sport: 'BASKETBALL' }); 
    }); 

    it('should perform login',() => { 
    const loginStub = stub().withArgs({ 
     username: 'abcd', 
     password: '1234', 
    }); 
    const wrapper = mount(<Login 
     loginUser={loginStub} 
    />); 
    wrapper.find('button').simulate('click'); 
    expect(loginStub.callCount).to.equal(1); 
    }); 
}); 

Answer 2

आपके कहे अनुसार, जिस तरह मैं आमतौर पर ऐसा करते हैं के रूप में संयुक्त राष्ट्र से जुड़े घटक निर्यात करने के लिए है अच्छा, और परीक्षण करें।

अर्थात

export {Login}; 

यहाँ एक उदाहरण है। Source of the component, और source of the tests।

लपेटा हुआ घटक के लिए, मैं उन लोगों के लिए परीक्षण नहीं करता क्योंकि मेरे मैपिंग्स (mapStateToProps और mapDispatchToProps) आमतौर पर बहुत ही सरल होते हैं। अगर मैं एक लिपटे घटक का परीक्षण करना चाहता था, तो मैं वास्तव में उन मानचित्रों का परीक्षण करूँगा। इसलिए वे हैं जो मैं पूरे घटक को एक लिपटे रूप में फिर से परीक्षण करने के बजाय, स्पष्ट रूप से परीक्षण करने के लिए चुनता हूं।

उन कार्यों का परीक्षण करने के दो तरीके हैं। एक तरीका मॉड्यूल के भीतर कार्यों को निर्यात करना होगा।

यानी;

export {mapStateToProps, mapDispatchToProps}

मैं, इस का एक बड़ा प्रशंसक नहीं हूँ क्योंकि मैं अनुप्रयोग में अन्य मॉड्यूल उन तक पहुँच नहीं करना चाहेंगे। मेरे परीक्षणों में, मैं कभी-कभी "इन-स्कोप" चरों तक पहुंचने के लिए babel-plugin-rewire का उपयोग करता हूं, इसलिए मैं इस स्थिति में यही करूँगा।

ऐसा ही कुछ दिख सकता है:

import { 
    Login, __Rewire__ 
} 

const mapStateToProps = __Rewire__.__get__('mapStateToProps'); 

describe('mapStateToProps',() => { ... });