Question

我有一个非常基本的React组件。我试图创建一个提交的表单。当表单提交时，我试图阻止提交行为的默认值，就像在React中一样。

以下是整个组件（此处有“还原”，但对于此问题并不重要）：

import React from "react"; 
import { connect } from 'react-redux'; 

export class App extends React.Component {

    handleSubmit(e) {
        e.preventDefault();
        this.props.dispatch(); 
    }

    render() {
        return (
            <div>
                <header role="banner">
                    <h1>Welcome</h1>
                    <p>{this.props.data}</p>
                </header>
                <form onSubmit={e => this.handleSubmit(e)}></form>
            </div>
        )
    }
}

const mapStateToProps = state => ({
    data: state.data
}); 

export default connect(mapStateToProps)(App);

当我运行测试时，我得到了这个：

TypeError: Cannot read property 'preventDefault' of undefined

忽略空的调度。我需要先通过这个。这里发生了什么？有什么想法吗？

这是完整的错误：

TypeError: Cannot read property 'preventDefault' of undefined

   5 |     
   6 |     handleSubmit(event) {
>  7 |         event.preventDefault();
   8 |         this.props.dispatch(); 
   9 |     }
  10 |

以下是测试：

it('dispatches an action when form is submitted', () => {
    const spy = jest.fn(); 
    const wrapper = shallow(<App dispatch={spy} />); 
    const form = wrapper.find('form'); 
    form.simulate('submit'); 
    expect(spy).toHaveBeenCalled(); 
});

Answer 1

酶simulate并不模仿事件对象，但你可以自己传递一个（见the docs for simulate），例如：

const mockEvent = { preventDefault: jest.fn() };
form.simulate('submit', mockEvent);

防止React组件

1 个答案: