用酶测试连接组件 [英] Testing connected components with enzyme
问题描述
我正在学习参加这个测试课程通过设置一个 store factory
测试助手来测试连接的组件,该助手创建一个与我们商店配置相匹配的测试商店".在下面,您可以看到我连接的示例组件以及用于设置测试的代码,其中我为我的示例组件创建了一个连接的浅酶包装器.但是,似乎我传递给示例组件的初始状态,在这种情况下 {joto: 'foo'}
在创建这个浅层包装器时没有传递给我的示例组件.我做错了什么,在运行酶测试时如何正确地重新创建必要的商店配置?谢谢!
I am learning taking this testing course to test connected components by setting up a store factory
test helper that 'creates a store for testing that matches the configuration of our store'. Below, you can see my connected sample component as well as the code used to setup tests, in which I create a connected, shallow enzyme wrapper of my sample component. However, it seems like the initial state I am passing to the sample component, in this case {jotto: 'foo'}
is not getting passed to my sample component when creating this shallow wrapper. Am I doing something wrong and how can I correctly recreate the necessary store configuration when running enzyme tests? Thanks!
示例组件:
import React from 'react';
import {connect} from 'react-redux';
const SampleComponent = (props) => {
console.log(props);
return (
<div>This is a sample component!</div>
);
};
const mapStateToProps = (state) => ({
jotto: state.jotto,
});
export default connect(mapStateToProps)(SampleComponent);
减速器:
import * as jottoActionTypes from 'actionTypes/jottoActionTypes';
export const initialState = {
isSuccess: false,
};
const jotto = (state = initialState, action) => {
switch (action.type) {
case jottoActionTypes.CORRECT_GUESS:
return {
...state,
isSuccess: true,
};
default:
return state;
}
};
export default jotto;
根减速器:
import {combineReducers} from 'redux';
import {connectRouter} from 'connected-react-router';
import jotto from 'reducers/jottoReducer';
export default (historyObject) => combineReducers({
jotto,
router: connectRouter(historyObject),
});
设置测试:
import React from 'react';
import {shallow} from 'enzyme';
import {createStore} from 'redux';
import rootReducer from 'reducers/rootReducer';
import SampleComponent from './sampleComponent';
export const storeFactory = (initialState) => createStore(rootReducer, initialState);
const store = storeFactory({jotto: 'foo'});
const wrapper = shallow(<SampleComponent store={store} />).dive();
console.log(wrapper.debug());
// Result:
{ store:
{ dispatch: [Function: dispatch],
subscribe: [Function: subscribe],
getState: [Function: getState],
replaceReducer: [Function: replaceReducer],
[Symbol(observable)]: [Function: observable] },
jotto: undefined,
dispatch: [Function: dispatch],
storeSubscription:
Subscription {
store:
{ dispatch: [Function: dispatch],
subscribe: [Function: subscribe],
getState: [Function: getState],
replaceReducer: [Function: replaceReducer],
[Symbol(observable)]: [Function: observable] },
parentSub: undefined,
onStateChange: [Function: bound onStateChange],
unsubscribe: [Function: unsubscribe],
listeners:
{ clear: [Function: clear],
notify: [Function: notify],
get: [Function: get],
subscribe: [Function: subscribe] } } }
推荐答案
解决方案:我忘记了 root reducer 的浏览器参数,因为我使用的是 connected-react-router
.
Solution: I forgot the browser parameter for my root reducer, given I was using connected-react-router
.
import rootReducer from 'reducers/rootReducer';
import {createBrowserHistory} from 'history';
export const storeFactory = (initialState) => createStore(rootReducer(createBrowserHistory()), initialState);
这篇关于用酶测试连接组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!