我Enzyme用来对我的React组件进行单元测试。我知道,为了测试原始未连接的组件,我只需要导出它并对其进行测试(我已经做到了)。我已经设法为连接的组件编写了一个测试,但是我真的不确定这是否是正确的方法,以及我究竟想对连接的组件进行什么测试。
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' }); }); });
这是个有趣的问题。
我通常会同时导入容器和组件以进行测试。对于容器测试,我使用redux-mock- store。组件测试用于测试异步功能。例如,在您的情况下,登录过程是使用sinon存根的异步功能。这是相同的片段
redux-mock- store
sinon
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); }); });