如何在 React with Jest 和 Enzyme 中测试表单提交?无法读取未定义的属性“preventDefault”

Posted

技术标签:

【中文标题】如何在 React with Jest 和 Enzyme 中测试表单提交?无法读取未定义的属性“preventDefault”【英文标题】:How to test form submission in React with Jest and Enzyme? Cannot read property 'preventDefault' of undefined 【发布时间】:2017-11-09 04:48:50 【问题描述】:

我正在编写一个测试来检查如果登录表单提交时没有数据,是否会显示错误通知组件。

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);
    );
);

看起来.simulate 正在工作,因为测试达到了我的handleSubmit 函数,但是我在测试中遇到了这个错误:

TypeError: 无法读取未定义的属性“preventDefault”

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(); 行,我的测试将通过,但是我需要该行以防止默认的表单提交事件。

【问题讨论】:

【参考方案1】:

很快就想通了...我只需要使用假的 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);
    );
);

【讨论】:

这个loginComponent.find('.form-login').dispatchEvent(new Event('submit')); 也有用吗? 是否仍会阻止默认设置,或者测试会导致重定向并重新加载? 如何从表单节点获取值?

以上是关于如何在 React with Jest 和 Enzyme 中测试表单提交?无法读取未定义的属性“preventDefault”的主要内容,如果未能解决你的问题,请参考以下文章

SonarQube with Jest and react - 覆盖 0 条新线路

[React Testing] Mock react-transition-group in React Component Tests with jest.mock

Jest with webpack 提供插件

[React Testing] Hide console.error Logs when Testing Error Boundaries with jest.spyOn

单元测试 react redux thunk dispatches with jest and react testing library for "v: 16.13.1",

如何在 React 和 Webpack 中使用 Jest