在编写用于响应组件的Jest测试用例时出错：“初始化之前无法访问'initialState'

如何解决在编写用于响应组件的Jest测试用例时出错：“初始化之前无法访问'initialState'

我正在用我的反应组件ProductDetailsForm.js中的一个用笑话编写测试用例，遇到以下错误。

FAIL  src/components/__tests__/ProductDetailsForm.test.js
Test suite failed to run

ReferenceError: Cannot access 'initialState' before initialization

  34 |
  35 | export default function reducer(state,action = {}) {
> 36 |     state = state || initialState;
     |                      ^
  37 |
  38 |     switch (action.type) {
  39 |         case AppDucksActionTypes.App_DUCKS_TOGGLE_SIDEBAR: {

  at reducer (src/redux/ducks/AppDucks.js:36:22)
  at node_modules/redux/lib/redux.js:372:24
      at Array.forEach (<anonymous>)
  at assertReducerShape (node_modules/redux/lib/redux.js:370:25)
  at combineReducers (node_modules/redux/lib/redux.js:435:5)
  at Object.<anonymous> (src/redux/rootReducer.js:20:16)
  at Object.<anonymous> (src/redux/store/createStore.js:4:1)
  at Object.<anonymous> (src/redux/services/HttpService.js:2:1)
  at Object.<anonymous> (src/redux/services/AppService.js:2:1)
  at Object.<anonymous> (src/redux/ducks/AppDucks.js:3:1)
  at Object.<anonymous> (src/components/ProductDetailsForm.js:3:1)
  at Object.<anonymous> (src/components/__tests__/ProductDetailsForm.test.js:3:1)

经过大量的代码挖掘，我发现这可能是由于createStore.js（已在其中创建redux存储的）

我如何得出结论？

我注释掉了HttpService.js中createStore.js的导入（第2行），并且测试顺利通过

下面是不同文件的代码供您参考。这些文件按使用方式依次提到（例如，将createStore.js导入到HttpService.js中，而HttpService.js导入到AppService.js中，依此类推）。

createStore.js

import { createStore,applyMiddleware,compose } from 'redux';
import { persistStore,persistReducer } from 'redux-persist';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
import rootReducer from '../rootReducer';
import storage from 'redux-persist/lib/storage';

const initialState = {};
const middleWares = [];

const composeEnhancers = process.env.NODE_ENV !== 'production' &&
    typeof window === 'object' &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({

    }) : compose;

const composedEnhancers = composeEnhancers(
    applyMiddleware(...middleWares)
);

const persistConfig = {
    key: 'root',storage: storage,stateReconciler: autoMergeLevel2
};

const pReducer = persistReducer(persistConfig,rootReducer);

const store = createStore(
    pReducer,initialState,composedEnhancers
);

const persistor = persistStore(store);

export {
    store,persistor
};

HttpService.js

import axios from 'axios';
import {store} from '../store/createStore';
import {showErrors} from '../ducks/AppDucks';

axios.interceptors.response.use(response => {
    const {dispatch} = store;
    const errorHeader = response.headers['x-errors'];
    if (errorHeader) {
        const errors = JSON.parse(errorHeader);
        dispatch(showErrors(dispatch,errors));
    }
    return response;
});

export function get(uri,config = {},responseType) {
    if (responseType) {
        config.responseType = responseType;
    }
    return axios.get(uri,config);
}

export function post(uri,data) {
    return axios.post(uri,data);
}

export default {
    get,post
}

AppService.js

import API_ROOT from './URI';
import HttpService from './HttpService';

export const fetchApiVersion = () => {
    let url = `${API_ROOT}/version`;
    let encodedURL = encodeURI(url);
    return HttpService
        .get(encodedURL)
        .then(res => res.data);
};

AppDucks.js

import keymirror from 'keymirror';
import { createAction } from 'redux-actions';
import { fetchApiVersion } from '../services/AppService';
import packageJson from '../../../package.json';

export const initialState = {
    ui: {
        sidebar: {
            showSidebar: true,expandedProductLineMap: {},selectedUploadType: ''
        }
    }
}

const AppDucksActionTypes = keymirror({
    App_DUCKS_GET_API_VERSION: null,App_DUCKS_TOGGLE_SIDEBAR: null
});

export const toggleSidebar = createAction(AppDucksActionTypes.App_DUCKS_TOGGLE_SIDEBAR);
export const getApiVersion = createAction(AppDucksActionTypes.App_DUCKS_GET_API_VERSION,dispatch => {
        fetchApiVersion()
            .then(data => {
                let uiVersion = prepareVersion(packageJson.version);
                let apiVersion = prepareVersion(data);
                if (uiVersion !== apiVersion) {
                    dispatch(blockUi({ blocked: true,errorCode: 1000 }));
                }
            });
    }
);

export default function reducer(state,action = {}) {
    state = state || initialState;
    switch (action.type) {
        case AppDucksActionTypes.App_DUCKS_TOGGLE_SIDEBAR: {
            return {
                ...state,ui: {
                    ...state.ui,sidebar: {
                        ...state.ui.sidebar,showSidebar: !state.ui.sidebar.showSidebar
                    }
                }
            }
        }
        default:
            return {
                ...state
            };
    }
}

ProductDetailsForm.js

import React,{Component} from "react";
import {connect} from "react-redux";
import { toggleSidebar } from "../../redux/ducks/AppDucks";
import XMLMetaDefinition from "../XMLMetaDefinition";
import MainView from "../layout/main-view/MainView";

export class ProductDetailsForm extends Component {
    state = {
        xmlVersion: '',error: ''
    };

    componentDidMount() {
        if (this.props.showSidebar) {
            this.props.toggleSidebar();
        }
    }

    handleXMLMetaDefinitionInput = e => {
        const {value,name} = e.target;
        if (name === "xmlVersion") {
            this.checkSpecialCharacters(value);
        }
    };

    render() {
        return (
            <div className="container">
                <MainView heading='Add meta data definition:'>
                    <XMLMetaDefinition
                        readOnly={false}
                        xmlMetaData={this.state}
                        handleXMLMetaDefinitionInput={
                            this.handleXMLMetaDefinitionInput
                        }
                    />
                </MainView>
            </div>
        );
    }
}

const mapDispatch = dispatch => {
    return {
        toggleSidebar: () => dispatch(toggleSidebar(dispatch))
    };
};

const mapState = state => {
    return {
        showSidebar: state.app_reducer.ui.sidebar.showSidebar
    };
};

export default connect(
    mapState,mapDispatch
)(ProductDetailsForm);

ProductDetailsForm.test.js

import React from "react";
import { shallow } from "enzyme";
import { ProductDetailsForm } from "../ProductDetailsForm";


let clearAll,setProductDetailsFormValue,history,wrapper;
beforeEach(() => {
    clearAll = jest.fn();
    history = { push: jest.fn() };
    setProductDetailsFormValue = jest.fn(); 
    wrapper = shallow(
        <ProductDetailsForm
            clearAll={clearAll}
            history={history}
            setProductDetailsFormValue={setProductDetailsFormValue}
        />
    );
});

afterEach(() => {
    jest.clearAllMocks();
}); 

test("should call handleMetaDefinitionInput",() => {
    const targetObj = { target: { name: "xmlVersion",value: "!abc?" } };
    const component = wrapper.find("XMLMetaDefinition");
    component.props().handleXMLMetaDefinitionInput(targetObj);
});

在编写用于响应组件的Jest测试用例时出错：“初始化之前无法访问'initialState'

如何解决在编写用于响应组件的Jest测试用例时出错：“初始化之前无法访问'initialState'

相关推荐