如何解决创建redux模拟存储时“无法读取未定义的属性'getState'”
我正在尝试在我的 React-Redux 应用程序中测试输入组件,并尝试使用“redux-mock-store”创建我的 redux 商店的模拟。
当我尝试运行测试时,我收到“无法读取未定义的属性‘getState’”错误,所以我想我没有正确初始化我的模拟存储,但我不知道我做错了什么。
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import InputField from './InputField';
import configureStore from 'redux-mock-store';
describe("<InputField />",() => {
const mockStore = configureStore([]);
//these are my two reducers as defined in my real redux store,so I'm passing them to the mock as well
const chosenCityReducer = (chosenCity = null,action) => {
if(action.type === 'CITY_CHOSEN') {
return action.payload;
}
return chosenCity
}
const chosenCityWeatherReducer = (weather=null,action) => {
if(action.type === 'WEATHER_FETCHED') {
return action.payload;
}
return weather
}
let store;
let component;
beforeEach(() => {
store = mockStore({
chosenCity: chosenCityReducer,weatherForecast: chosenCityWeatherReducer
});
});
let div = document.createElement('div')
component = ReactDOM.render(
<Provider store={store}>
<InputField />
</Provider>,div);
it('should render with given state from Redux store',() => {
expect(component.toJSON()).toMatchSnapshot();
});
模拟定义有问题吗? 谢谢!
解决方法
在调用 <InputField/>
钩子之前创建组件(<Provider />
包裹在 beforeEach
中)所以 mockStore
还没有被调用所以 {{1 }} 将是 store
。
试试这个:
undefined
如果您愿意,您可以随时将商店创建移出 let component;
beforeEach(() => {
let div = document.createElement('div');
const store = mockStore({
chosenCity: chosenCityReducer,weatherForecast: chosenCityWeatherReducer
});
component = ReactDOM.render(
<Provider store={store}>
<InputField />
</Provider>,div);
});
it('should render with given state from Redux store',() => {
expect(component.toJSON()).toMatchSnapshot();
});
。
我通常有一个名为 beforeEach
的函数(它返回渲染的组件),我在每个测试中调用它而不是使用 renderSubject
。它减少了不必要的可变变量,例如在测试之间使用的 beforeEach
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。