用酶测试连接的组件 [英] Testing connected components with enzyme

问题描述

我正在学习此测试课程通过建立 store factory 测试帮助程序来测试连接的组件，该帮助程序创建一个用于测试以匹配我们的商店配置的商店。在下面，您可以看到我连接的样品组件以及用于设置测试的代码，在这些代码中，我为样品组件创建了一个连接的浅酶包装纸。但是，似乎是我正在传递给示例组件的初始状态，在这种情况下，创建该示例时， {jotto：'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] } } }

推荐答案

解决方案：考虑到我正在使用 connected-react-router，我忘记了我的root reducer的浏览器参数。 。

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屋！