reactjs - 创建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
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
. 它减少了不必要的可变变量,例如component
在测试之间使用。
推荐阅读
- handlebars.js - 车把 - 这种语法有效吗?
- powerbi - Power BI Report 衡量按时完成的作业
- regex - 用于从 Dataframe 中删除空格的 RegEx
- javascript - 如何通过 JavaScript 设置 PHP 变量以隐藏特定视口宽度的图像
- sublimemerge - 如何在 Sublime Merge 中“全部解析”或将键绑定到“解析下一个”?
- python-3.x - 一个问题(现在):逐行读取文件夹中的所有文件
- java - 如何修复我的 Linechart 十字准线的位置
- javascript - 移至 monorepo 后重新设置分支
- python-3.x - 如何从具有多个 groupby 列的 OHLC 数据中计算枢轴值
- r - 轴的ggplot`expand_scale()` - 不一致