Redux: Bağlı bir bileşen nasıl test edilir?

Question

React bileşenlerini test etmek için Enzyme kullanıyorum. Ham bağlantısız bileşenin test edilmesi için bunu ihraç etmem ve test etmem gerektiğini anladım (bunu yaptım). Bağlı bileşen için bir test yazmayı başardım, ancak bu doğru yolun olup olmadığına ve ayrıca bağlı bileşen için tam olarak ne test etmek istediğime gerçekten emin değilim. Sizin de belirttiğiniz gibi

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

Bu ilginç bir sorudur.

Genellikle test yapmak için konteyner ve bileşen hem aktarırım. Konteyner testi için kullanıyorum, redux-mock-store. Bileşen testi, uyumsuz fonksiyonların test edilmesi içindir. Örneğin sizin durumunuzda, oturum açma işlemi sinon stubs kullanarak bir uyumsuzluk işlevidir. İşte, aynı bir pasaj,

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

, genellikle yapmak yolu bu kadar un bağlı bileşeni ihraç etmektir iyi ve bunu test et. yani

export {Login}; 

Burada bir örnek verilmiştir. Source of the component ve source of the tests.

Sarılı bileşen için, eşlemlerim (mapStateToProps ve mapDispatchToProps) genellikle çok basit olduğu için bunlara yönelik bir test yapmıyorum. Sarılı bir bileşeni test etmek isteseydim, gerçekten bu haritaları test ediyorum. Yani, tüm bileşeni sarılı bir formda yeniden test etmekten ziyade, açıkça test etmeyi tercih ettiğim şeyler bunlar.

bu işlevleri test etmek için iki yol vardır. Bir yol, modül içindeki fonksiyonları dışa aktarmak olabilir.

i.e; Ben bunlara erişmek için uygulamadaki diğer modülleri istemem çünkü

export {mapStateToProps, mapDispatchToProps}

Ben, bu büyük bir hayranı değilim. Testlerimde bazen "kapsam içi" değişkenlere erişmek için babel-plugin-rewire kullanıyorum, bu yüzden bu durumda yapacağım. benzeyebilecek

:

import { 
    Login, __Rewire__ 
} 

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

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