我想测试模拟按钮单击时调用从 mapDispatchToProps 传递的函数。
如何测试从mapDispatchToProps传递过来的函数是否被调用？
我尝试通过 props 传递一个模拟函数，但它不起作用。任何帮助将不胜感激。
下面是我的假类代码和测试示例。
我的组件
// All required imports
class App extends React.Component<Props> {
render() {
const { onClick } = this.props;
return (
<>
<h1>Form</h1>
<input />
<button onClick={() => onClick()} />
</>
);
}
}
const mapStateToProps = (state) => {
return {
state
};
};
const mapDispatchToProps = (dispatch) => {
return {
onClick: () => dispatch(actions.onClick())
};
};
export default connect(mapStateToProps, mapDispatchToProps)(App);
我的测试文件
import { configure, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16/build/index';
import jsdom from 'jsdom';
import React from 'react';
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import ConnectedApp, { App } from './App';
function setUpDomEnvironment() {
const { JSDOM } = jsdom;
const dom = new JSDOM('<!doctype html><html><body></body></html>', { url: 'http://localhost/' });
const { window } = dom;
global.window = window;
global.document = window.document;
global.navigator = {
userAgent: 'node.js',
};
copyProps(window, global);
}
function copyProps(src, target) {
const props = Object.getOwnPropertyNames(src)
.filter(prop => typeof target[prop] === 'undefined')
.map(prop => Object.getOwnPropertyDescriptor(src, prop));
Object.defineProperties(target, props);
}
setUpDomEnvironment();
configure({ adapter: new Adapter() });
const mockStore = configureMockStore();
describe('App', () => {
describe('When App connected to store', () => {
describe('When button clicked', () => {
it('should not crush after click on login button', () => {
const onClick = jest.fn()
const store = mockStore(initialStates[1]);
const wrapper = mount(
<Provider store={store}>
<ConnectedApp />
</Provider>);
wrapper.find('button').simulate('click');
??? how to test that function passed from mapDispatchToProps was fired?
});
});
});
});
最佳答案
我建议遵循 the approach described in the docs 并将连接的组件导出为默认导出以在应用程序中使用，并将组件本身导出为命名导出以进行测试。
对于上面的代码，导出 App 类并测试点击，如下所示:
import * as React from 'react';
import { shallow } from 'enzyme';
import { App } from './code';
describe('App', () => {
it('should call props.onClick() when button is clicked', () => {
const onClick = jest.fn();
const wrapper = shallow(<App onClick={onClick} />);
wrapper.find('button').simulate('click');
expect(onClick).toHaveBeenCalledTimes(1);
});
});
shallow 提供测试组件本身所需的一切。 (shallow even calls React lifecycle methods 自 Enzyme v3 起)
正如您所发现的，要对组件进行完整渲染，需要模拟 redux 存储并将组件包装在 Provider 中。除了增加很多复杂性之外，这种方法最终还会在组件单元测试期间测试模拟存储和所有子组件。
我发现直接测试组件以及导出并直接测试 mapStateToProps() 和 mapDispatchToProps() 更有效，这非常简单，因为它们应该为 pure functions 。
上面代码中的mapDispatchToProps()可以这样测试:
describe('mapDispatchToProps', () => {
it('should dispatch actions.onClick() when onClick() is called', () => {
const dispatch = jest.fn();
const props = mapDispatchToProps(dispatch);
props.onClick();
expect(dispatch).toHaveBeenCalledWith(actions.onClick());
});
});
这种方法使组件的单元测试变得非常简单，因为您可以直接传递组件 Prop ，并且可以非常简单地测试组件是否将通过传递给 connect 的纯函数 ( or objects ) 传递正确的 Prop ().
这确保了单元测试简单且有针对性。测试 connect() 和 redux 是否与组件及其所有子组件在完整 DOM 渲染中正常工作可以在 e2e 中完成> 测试。
关于reactjs - 如何测试从mapDispatchToProps传递的函数(React/Redux/Enzyme/Jest)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52072403/