web-dev-qa-db-ja.com

ReactでJestおよびEnzymeを使用してフォーム送信をテストする方法？undefinedのプロパティ 'preventDefault'を読み取れません

ログインフォームがデータなしで送信された場合にエラー通知コンポーネントが表示されるかどうかを確認するテストを書いています。

_describe('User signin', () => {
    it('should fail if no credentials are provided', () => {
        const loginComponent = shallow(<Login />);
        expect(loginComponent.find('.form-login').length).toBe(1);
        loginComponent.find('.form-login').simulate('submit');
        expect(loginComponent.find(Notification).length).toBe(1);
    });
});
_

テストがhandleSubmit関数に到達すると_.simulate_が機能しているようですが、テストでこのエラーが発生しています：

TypeError：未定義のプロパティ 'preventDefault'を読み取れません

enter image description here

HandleSubmit関数

_handleSubmit(e) {
    e.preventDefault();  // <-- problem here
    const user = this.state.username;
    const pass = this.state.password;
    const gotoDashboard = () => this.props.history.Push('/dashboard');

    const postLogin = (user, pass) => {
        api.userLogin(user, pass)
_

私のテストはe.preventDefault();行を削除するとパスしますが、デフォルトのフォーム送信イベントを防ぐためにそこにその行が必要です。

javascriptreactjstestingjestjsenzyme
9
Leon Gaban

すぐにわかりました...偽のpreventDefault関数を使ってfakeEventを作成し、それを渡す必要があるだけです。

describe('User signin', () => {
    it('should fail if no credentials are provided', () => {
        const fakeEvent = { preventDefault: () => console.log('preventDefault') };
        const loginComponent = shallow(<Login />);
        expect(loginComponent.find('.form-login').length).toBe(1);
        loginComponent.find('.form-login').simulate('submit', fakeEvent);
        expect(loginComponent.find(Notification).length).toBe(1);
    });
});
10
Leon Gaban