我写了一份HOC,以便在我的项目中以动态方式注入减速器,效果很好。但是我很难开玩笑地对此进行测试。我的疑问是如何在withReducer函数内部测试此Extended类返回的内容,以及如何测试是否使用正确的参数调用contextType函数(store.injectReducer)。
我的withReducer.js
/* eslint-disable react/no-deprecated */
import React from 'react';
import { ReactReduxContext } from 'react-redux';
export const withReducer = (key, reducer) => (WrappedComponent) => {
class Extended extends React.Component {
static WrappedComponent = WrappedComponent;
componentWillMount() {
const { store } = this.context;
store.injectReducer(key, reducer);
}
render() {
return <WrappedComponent {...this.props} />;
}
}
Extended.contextType = ReactReduxContext;
return Extended;
};
export default withReducer;
我的测试功能
import React from 'react';
import { shallow } from 'enzyme';
import { identity } from 'lodash';
import { Provider } from 'react-redux';
import { withReducer } from '../withReducer';
import initializeStore from '../initializeStore';
const Component = jest.fn();
let store;
let ComponentWithReducer;
const reducer = identity;
beforeEach(() => {
store = initializeStore();
ComponentWithReducer = withReducer('test', reducer)(Component);
});
describe('withReducer', () => {
it('should propagate props', () => {
const props = { testProp: 'test' };
const renderedComponent = shallow(
<Provider store={store}>
<ComponentWithReducer {...props} />
</Provider>, {
context: { store },
},
);
expect(renderedComponent.dive().props()).toEqual(props); // works
// how test render() return here
// how to test that store.injectReducer(key, reducer) was called here
});
});
答案 0 :(得分:0)
您可以在商店中模拟injectReducer
函数:
const props = { testProp: 'test' };
const mockFn = jest.fn();
const renderedComponent = shallow(
<Provider store={{ injectReducer: mockFn }}>
<ComponentWithReducer {...props} />
</Provider>, {
context: { store },
},
);
expect(mockFn).toHaveBeenCalled();
expect(mockFn).toHaveBeenCalledWith('test', reducer);