问题描述
我正在用我的反应组件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);
});
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）